Grid
- Grid
- Linhas
- Colunas
- Gap
Display Grid
Criamos um sistema de grid completo e personalizável para ajudar a criar layouts responsivos e flexíveis. Este sistema é composto por sete componentes principais: Container de Grid, Itens de Grid, Modelos de Grid, Gaps de Grid, Alinhamento de Grid, Auto-Posicionamento de Grid e Densidade de Grid.
.grid - display: grid;
.grid-item - Itens;
.grid-t-co{1|12} - grid-template-columns;
.grid-t-l{1|12} - grid-template-rows;
.grid-gap-{pp|p|m|g|gg|xg} - grid-gap;
.grid-just - justify-items;
.grid-align-i - align-item;
.grid-auto - grid-auto;
.grid-dens - grid-density;
Exemplo 1: Grid Simples com 2 Colunas;
<div class="grid grid-t-co2 grid-gap-p">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Exemplo 2: Grid com 3 Colunas e Itens Centralizados;
<div class="grid grid-t-co3 grid-gap-m grid-just-c">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
Grid Template Rows
.grid-t-ln{1|12} - grid-template-rows;
Exemplo 1: Grid com 2 linhas e 4 colunas;
<div class="grid grid-t-co4 grid-t-ln2">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</div>
Exemplo 1: Grid com 5 linhas e 2 colunas;
<div class="grid grid-t-co2 grid-t-ln5">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
Grid Template Rows
.grid-t-l{1|12} - grid-template-rows;
Exemplo 1: Grid com 1 colunas;
<div class="grid grid-t-co1">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</div>
Exemplo 1: Grid com 2 linhas e 5 colunas;
<div class="grid grid-t-co5 grid-t-l2">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
Grid Gap
.grid-gap-{pp|p|m|g|gg|xg} - grid-gap;
Exemplo 1: Grid com gap M entre os itens;
<div class="grid grid-t-co3 grid-gap-m">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 1: Grid com gap PP entre os itens;
<div class="grid grid-t-co2 grid-gap-pp">
<div>Item 1</div>
<div>Item 2</div>
</div>
Exemplo 1: Grid com gap GG entre os itens;
<div class="grid grid-t-co2 grid-gap-gg">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
Justify Items
.grid-just-s - justify-items: start;
.grid-just-c - justify-items: center;
.grid-just-e - justify-items: end;
.grid-just-sb - justify-items: space-between;
.grid-just-sa - justify-items: space-around;
Exemplo 1: Justificar itens para o início;
<div class="grid grid-just-s">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 2: Justificar itens para o centro;
<div class="grid grid-just-c">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 3: Justificar itens para o fim;
<div class="grid grid-just-e">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 4: Justificar itens com espaço entre;
<div class="grid grid-just-sb">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 5: Justificar itens com espaço ao redor;
<div class="grid grid-just-sa">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Align Items
.grid-just-s - justify-items: start;
.grid-just-c - justify-items: center;
.grid-just-e - justify-items: end;
.grid-just-sb - justify-items: space-between;
.grid-just-sa - justify-items: space-around;
Exemplo 1: Justificar itens para o início;
<div class="grid grid-just-s">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 2: Justificar itens para o centro;
<div class="grid grid-just-c">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 3: Justificar itens para o fim;
<div class="grid grid-just-e">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 4: Justificar itens com espaço entre;
<div class="grid grid-just-sb">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Exemplo 5: Justificar itens com espaço ao redor;
<div class="grid grid-just-sa">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>