Grid

O Grid não é uma seção de página. É o conjunto de classes de largura e de espaçamento que as outras seções usam para ficar alinhadas entre si. Em src/pages/ você não o escolhe: ele já vem dentro de cada seção.

Leia esta página para entender por que duas seções de uma mesma landing batem na mesma coluna, e para saber o que significam os nomes de classe que aparecem em src/ui/.

Grid

Pasta: ui/grid

Variantes

Id	Variante	Tom
grid	12 spans	light

Propriedades

Sem propriedades exportadas.

Como as seções usam a grade

• grid.container limita a largura da página a 1200 px e grid.wide a 1320 px; as duas têm 24 px de margem interna no desktop.
• grid.span(n) define quantas colunas um bloco ocupa, de 1 a 12. No desktop, a largura de span(n) é n colunas mais n - 1 espaços de 24 px.
• grid.row e grid.cols2, cols3, cols4 e cols6 distribuem blocos em linha ou em colunas iguais, com 24 px entre eles.

Abaixo de 768 px a grade passa a ter 4 colunas, com 16 px de espaço e de margem. Os blocos de span 5 a span 12 ocupam a largura toda, e cols3 vira uma coluna só.

Captura da galeria, em 1280 px: span 1 a span 12, e três blocos em linha abaixo.

Mesma galeria em 360 px, a largura de um celular.

As regras de uso que decorrem da grade (o que alinhar, quando usar largura solta, como o mobile se comporta) estão em Regras de UX e grade.