O que é CSS Grid?

O layout de grelha CSS (ou simplesmente CSS Grid) é um sistema de disposição bidimensional em CSS. Permite gerir a colocação de elementos tanto em linhas (horizontalmente) como em colunas (verticalmente), criando estruturas de rede complexas para construir interfaces.

Os conceitos principais do CSS Grid incluem:

• Contêiner de Grid: Elemento ao qual se aplica a propriedade display: grid ou display: inline-grid. Os descendentes deste elemento tornam-se itens de Grid.
• Itens de Grid: Os descendentes diretos do Contêiner de Grid.
• Linhas de Grid: Linhas divisórias que formam a rede. Podem ser nomeadas ou ter um índice numérico.
• Pistas de Grid: O espaço entre duas linhas de rede — pode ser uma coluna ou uma linha.
• Células de Grid: A menor unidade de rede, formada pela interseção de uma linha e uma coluna.
• Áreas de Grid: Uma região retangular da rede que ocupa uma ou várias células.

As propriedades principais para trabalhar com CSS Grid incluem:

Para o contêiner:

• display: grid | inline-grid;
• grid-template-columns: Define as colunas da rede.
• grid-template-rows: Define as linhas da rede.
• grid-template-areas: Define áreas nomeadas da rede.
• gap | row-gap | column-gap: Define os espaços entre as células.
• justify-items | align-items | place-items: Alinhamento do conteúdo dentro das células ao longo dos eixos principal e transversal.
• justify-content | align-content | place-content: Alinhamento das pistas de rede dentro do contêiner.

Para os elementos (Itens de Grid):

• grid-column-start | grid-column-end | grid-column: Define quais linhas de coluna o elemento ocupa.
• grid-row-start | grid-row-end | grid-row: Define quais linhas de fila o elemento ocupa.
• grid-area: Atribui ao elemento uma área nomeada da rede ou define sua posição usando linhas.
• justify-self | align-self | place-self: Alinhamento do próprio elemento dentro da sua célula.

O CSS Grid fornece ferramentas poderosas para criar layouts responsivos e complexos, simplificando significativamente tarefas que anteriormente exigiam o uso de float, inline-block ou posicionamento absoluto.

.container {
  display: grid; /* Tornar o elemento um contêiner de Grid */
  grid-template-columns: 1fr 1fr 1fr; /* Criar 3 colunas de largura igual */
  grid-template-rows: auto auto; /* Criar 2 linhas com altura automática */
  gap: 10px; /* Adicionar espaços entre as células */
}

.item {
  /* Os elementos dentro do contêiner tornam-se automaticamente itens de Grid */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* O primeiro elemento ocupa as colunas 1 a 3 */
}