Sou novo no Tailwind e estou tendo um problema com meu layout de grade.
<Grid
gap="3"
columns={{ initial: '1', md: '4' }}
align="end"
>
<Box className="md:col-span-3">
<Text
as="p"
mb="1"
>
Password
</Text>
<TextField.Root
type="password"
placeholder="Password..."
{...register('password')}
/>
<ErrorMessage className="mt-5">{errors.password?.message}</ErrorMessage>
</Box>
<Button
disabled={isSubmitting}
>
Log In {isSubmitting && <Spinner />}
</Button>
</Grid>
Meu objetivo era ter o Log In
botão ao lado da entrada de texto em dispositivos maiores, mas abaixo em dispositivos menores.
No entanto, estou tendo esse problema em que há um ponto entre 768px
e 1024px
onde o layout da grade não está funcionando como eu esperava.
Entendo 768px
que é o ponto de interrupção para dispositivos médios e 1024px
é o ponto de interrupção para dispositivos grandes.
Imagino que seja algo bobo, mas não consigo entender direito.
Anexei imagens para mostrar o problema.
A segunda imagem é o layout de grade quando a largura da tela está entre 768 e 1024 pixels.
Pelo que entendi, especifiquei 4 colunas para dispositivos médios e para <Box>
ocupá-las 3. E qualquer coisa menor que 768px deve usar apenas uma coluna.