WDD 130: Fundamentos da Web

S04 Atividade de Aprendizagem: CSS Grids

Visão Geral

O CSS Grid Layout (ou layout de grade) é um sistema de layout bidimensional para a web que permite organizar o conteúdo em linhas e colunas. Ele inclui muitos recursos que simplificam a construção de layouts complexos. O objetivo desta atividade é que você entenda os recursos básicos do CSS Grid e como usá-los para criar layouts.

Preparação

O CSS Grid é um poderoso sistema de layout que permite criar facilmente layouts complexos para páginas da web. Imagine que você está desenhando linhas invisíveis em sua página da web para criar linhas e colunas, da mesma forma que você organiza o conteúdo em uma tabela ou planilha.

Por favor, assista aos seguintes vídeos que apresentam o CSS Grid:

Criando um Layout de Grid (Grid Layout)

Conforme mostrado nos vídeos, para criar um layout do tipo CSS Grid, você precisa usar determinadas propriedades no contêiner da grade, que é o elemento pai que contém todos os itens da sua grade. Assim, os elementos filhos imediatos desse contêiner pai responderão às declarações da grade (mas não os elementos netos).

As propriedades de grade mais comuns são:

• display: grid – Transforma um elemento em um contêiner de grade
• grid-template-columns – Define o número e o tamanho das colunas
• grid-template-rows – Define o número e o tamanho das linhas
• gap – Define o espaço entre os itens da grade

Definindo Colunas e Linhas

As propriedades grid-template-columns e grid-template-rows permitem que você especifique exatamente como sua grade deve ser estruturada. Você pode usar diferentes unidades para controlar o tamanho, como pixels (px), porcentagens (%) ou a unidade flexível fr.

Formas comuns de definir faixas de grade:

• Tamanhos fixos – Use pixels para medições exatas: 200px 150px 100px
• Tamanhos flexíveis – Utilize unidades fr para aproveitar ao máximo o espaço disponível: 1fr 2fr 1fr
• Tamanhos mistos – Combine unidades diferentes: 200px 1fr 100px
• Função repeat – Use repeat() para padrões repetidos: repeat(3, 1fr)

Aqui está um exemplo de um contêiner de grade simples:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
   gap: 10px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
}

Neste exemplo, display: grid cria o contêiner de grade, grid-template-columns: 1fr 1fr 1fr cria três colunas iguais, grid-template-rows: 100px 200px define duas linhas com alturas específicas e gap: 10px adiciona 10 pixels de espaço entre todos os itens da grade. A unidade 1fr significa "uma fração" do espaço disponível, portanto, cada coluna ocupa a mesma quantidade de largura.

Instruções da Atividade

1. Conclua este tutorial de 28 lições sobre CSS Grid: Grid Garden.