Pular para o conteúdo principal

Grid

Para estruturação de layouts responsivos de forma fácil, usamos um sistema de grid, que define colunas para cada tamanho de tela. Os tamanhos são:

CategoriaTamanho de telaNúmero de colunas
Desktop1024px ou mais12
Tablet1023px - 768px6
Mobile767px ou menos4

Utilização​

Para utilizarmos, seguimos a seguinte estrutura:

pagina-exemplo/index.tsx
import { Container, Row, Column } from "{pasta globals}/styles";

function PaginaExemplo() {
    ...
    <Container>
        <Row>
            <Column>
                {... Conteudo ...}
            </Column>
        </Row>
        <Row>
            <Column desktop={6}>
                {... Conteudo ...}
            </Column>
            <Column desktop={6}>
                {... Conteudo ...}
            </Column>
        </Row>
    </Container>
}

O componente Container deve envolver o código que contém o Grid, normalmente é o primeiro componente em uma página.
O componente Row define uma linha que irá conter colunas. Este abriga uma quantidade de colunas baseado no tamanho da tela, como mostrado na tabela acima.
O componente Column é a divisão das colunas. Em uma Row, as colunas devem sempre ocupar o máximo do tamanho que ela pode conter. Em um desktop por exemplo, devem sempre ocupar 12 colunas.

É possível também definir o tamanho que cada coluna deverá ocupar em cada dispositivo. Se quisermos que uma coluna ocupe 12 espaços apenas em telas de Desktop e 2 em telas Mobile, passamos as propriedades desktop e mobile:

<Column desktop={12} mobile={2}></Column>

pagina-exemplo/index.tsx
function PaginaExemplo() {
    { ... }

    return (
        <Container>
            <Row>
                <Column desktop={12}>12 colunas</Column>
            </Row>
            <Row>
                <Column desktop={6}>6 colunas</Column>
                <Column desktop={6}>6 colunas</Column>
            </Row>
            <Row>
                <Column desktop={4}>4 colunas</Column>
                <Column desktop={4}>4 colunas</Column>
                <Column desktop={4}>4 colunas</Column>
            </Row>
        </Container>
    )
}