buenodc

Search buenodc

bg cover

Layout com Grid

Prof. Me. Danilo Bueno

Grid

  • É um sistema de layout bidimensional baseado em grade.
  • CSS sempre foi usado para fazer o layout de nossas páginas da web, mas nunca fez um bom trabalho.
  • Tabelas, floats, posicionamento, normal flow -> hacks.
  • Primeiro módulo criado especificamente para resolver os problemas de layout.
  • Lançado em 2017.

Terminologia Básica

  • Grid Container: O elemento pai que contém os itens da grade.
  • Grid Items: Os elementos filhos dentro do grid container.
  • Grid Lines: As linhas que definem as divisões entre as células da grade.
  • Grid Tracks: As linhas e colunas que formam a grade.
  • Grid Cells: As interseções entre linhas e colunas, formando as unidades básicas da grade.
  • Grid Areas: Áreas nomeadas que podem ser usadas para posicionar itens na grade.

Grid Container

  • A ideia de container está muito presente no CSS.
  • Englobar/envolver o conteúdo em um elemento HTML.
<div class="container">
  <p>Conteúdo HTML</p>
  <img src="img/foto.png" alt="Imagem exemplo">
</div>

A Mágica do display: grid

  • Para ativar o Grid, basta aplicar a propriedade:
  • display: grid ao elemento pai (o container):
.container {
  display: grid;
}

A partir deste momento, os filhos diretos deste container se tornam grid items e começam a se comportar de uma maneira nova e especial.

bg w:90%

Construção do Grid

  • Por padrão, é criado um layout de uma única coluna.
  • É possível definir o número de colunas e linhas (exemplo)
.container {
  display: grid;
  /* grid-template-columns */
  grid-template-columns: 100px 200px 100px; 
  grid-template-columns: 25% 50% 25%;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 100px 100px;
}

bg contain

Nova unidade de medida: fr

  • A unidade fr representa uma fração do espaço disponível no container.
  • Muito útil para criar layouts flexíveis.
.container {
  display: grid; 
  grid-template-columns: 1fr 2fr 1fr; /* 4 partes no total */
}

Gap: Espaçamento entre Itens

  • gap cria um espaçamento entre as células do grid.
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;  /* Aplica 10px de espaço na horizontal e vertical */
  row-gap: 20px; /* Define o espaço apenas entre as linhas */
  column-gap: 15px; /* Define o espaço apenas entre as colunas */
}

Repeat: Repetição Automática

  • repeat() permite repetir padrões de colunas ou linhas.
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas de 1fr cada */
  grid-template-rows: repeat(2, 100px); /* 2 linhas de 100px cada */
}

bg right cover

Grid Items

Propriedades dos Filhos

Posicionamento de Itens

  • Itens podem ser posicionados em áreas específicas do grid usando grid-column e grid-row (exemplo).
.item-1 {
  grid-column: 2;
  grid-row: 2;
  
  grid-column: 3 / 5; 
  grid-row: 3 / 5;   
}

bg w:90%

Grid Areas

  • Itens podem ser posicionados usando áreas nomeadas (exemplo).
.container {
  display: grid;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
} 

.header {
  grid-area: header;
}

bg contain

Alinhamento de Itens

  • Itens podem ser alinhados dentro de suas células usando justify-items e align-items (exemplo).
.container {
  display: grid;
  justify-items: center; /* Alinha horizontalmente */
  align-items: center;    /* Alinha verticalmente */
}

bg contain vertical bg contain

Alinhamento do Grid

  • O próprio grid pode ser alinhado dentro do container usando justify-content e align-content.
.container {
  display: grid;
  justify-content: center; /* Alinha o grid horizontalmente */
  align-content: center;    /* Alinha o grid verticalmente */
}

bg w:90% bg w:90%

bg cover

Como é aplicado no Bootstrap?

  • O sistema de grid do Bootstrap 5 é baseado em Flexbox.
  • Porém, o Bootstrap também oferece suporte ao CSS Grid.
  • Utilização de classes como:
    • grid para definir um container grid.
    • g-col-3 para definir o número de colunas.

Como é aplicado no Tailwind?

  • O Tailwind CSS tem suporte completo para CSS Grid.
  • Utilização de classes utilitárias como:
    • grid para definir um container grid.
    • grid-cols-3 para definir o número de colunas.
    • grid-rows-2 para definir o número de linhas.
    • gap-4 para definir o espaçamento entre os itens.

Para saber mais

Obrigado!

[email protected] · website/docs · github