Layout & Grid

1. Containers `.g-*`

Centralizam o conteúdo com largura máxima. Baseados nos breakpoints do sistema PP→XXG.

.g - fluid (sem max-width)

.g-pp380px

.g-p576px

.g-m768px

.g-g992px

.g-gg - padrão desktop1200px

.g-xg1400px

2. Grid 12 Colunas `.l` + `.co`

O wrapper .l cria um grid de 12 colunas. As classes .coN definem quantas colunas o elemento ocupa.

12 colunas individuais

1

2

3

4

5

6

7

8

9

10

11

12

Combinaes comuns

.co6 (50%)

.co4 (33%)

.co3 (25%)

.co8 (66%)

.co4 (33%)

3. Grid Templates `.l-N`

Atalhos para criar grids rápidos com colunas iguais ou proporções fixas, sem precisar aplicar classes nos itens filhos.

Colunas Iguais (.l-2, .l-3, .l-4...)

.l-2 (1fr 1fr)

.l-2

.l-3

Proporções (1-2, 2-1, 1-3...)

.l-1-2 (1fr)

.l-1-2 (2fr)

.l-3-1 (3fr)

.l-3-1 (1fr)

Templates Responsivos

Item 1

Item 2

Item 3

Item 4

4. Breakpoints Responsivos `.coN-bp`

Sufixos de breakpoint definem o tamanho mínimo de tela para ativar a coluna. Sem sufixo = sempre ativo (mobile-first padrão = 12 colunas).

Sufixo	Min-Width	Exemplo	Descrição
sem sufixo	sempre	.co6	50% em todos os tamanhos
-pp	= 380px	.co6-pp	50% a partir de 380px
-p	= 576px	.co4-p	33% a partir de 576px
-m	= 768px	.co6-m	50% a partir de 768px (tablet)
-g	= 992px	.co4-g	33% a partir de 992px
-gg	= 1200px	.co3-gg	25% a partir de 1200px
-xg	= 1400px	.co2-xg	16% a partir de 1400px

Exemplo: cards que se adaptam ao tamanho da tela

Card A

Card B

Card C

Card D

5. Flexbox Engine

Baseado em dois eixos (Eixo Principal e Eixo Cruzado), o Flexbox permite alinhar e distribuir itens com total controle.

Eixo Principal (Horizontal)

Controla como os itens se distribuem. Classes prefixadas com .j- (Justify).

Eixo Cruzado (Vertical)

Controla o alinhamento na altura. Classes prefixadas com .al (Align).

5.1 O Container (.flx)

Justify Content (Eixo Principal)

.j-ct (Center)

A

B

.j-sb (Space Between)

A

B

.j-en (Flex End)

A

B

Align Items (Eixo Cruzado)

.alc (Center)

A

B

.ale (End)

A

B

.alst (Stretch)

A

B

Direção (.f-cl) e Quebra (.f-wr)

.f-cl (Column)

A

B

.f-wr (Wrap)

1

2

3

5.2 Comportamento dos Itens

.f-1 (Flex Grow: 1)

Cresce (f-1)

Fixo

.f-sh0 (Flex Shrink: 0)

Não esmaga!

Esmaga

6. Referência Completa

Containers (Max Width)

.gfluid

.g-pp380px

.g-p576px

.g-m768px

.g-g992px

.g-gg1200px

.g-xg1400px

Grid Templates (.l-N)

.l-[1-6]n cols iguais

.l-1-21/2 proporção

.l-2-12/1 proporção

.l-N-[bp]responsivo

Grid (12 Colunas)

.l12 cols grid

.l0grid sem gap

.co[1-12]largura

.coN-[bp]responsivo

Flexbox Engine

.flxdisplay: flex

.j-[ct|sb|en]eixo hor

.al[c|e|st]eixo ver

.f-[cl|wr]direção

1. Containers .g-*

2. Grid 12 Colunas .l + .co

3. Grid Templates .l-N

4. Breakpoints Responsivos .coN-bp