CSS Grid em Prática Layouts Úteis Sem um Framework

Flexbox ou Grid? Use os dois. O Flexbox trata um eixo — linha ou coluna. O CSS Grid trata os dois ao mesmo tempo. Essa distinção guia todas as decisões de layout que você fará.

As propriedades que realmente importam

Você pode construir quase qualquer layout que encontrar com cinco propriedades: grid-template-columns, grid-template-rows, gap, grid-areae, e place-items. Aqui está uma carta centralizada em seis linhas:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center é abreviação de align-items + justify-items. Uma linha, conteúdo perfeitamente centralizado, sem necessidade de cálculos.

A unidade fr: pare de pensar em porcentagens

As porcentagens não consideram o espaçamento entre as células. fr (unidade fracionária) distribui espaço restante após os valores fixos serem colocados. Isso é um grid padrão de 12 colunas: Cada

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

recebe uma parte igual do espaço restante após a margem ser subtraída. Três colunas em 1fr nunca ultrapassarão o contêiner — algo repeat(3, 1fr) pode ficar errado quando há margem envolvida. 33.33% Auto-fill versus auto-fit: grids responsivos sem consultas de mídia

Ambos os termos deixam o navegador decidir quantas colunas cabem. A diferença aparece quando há menos itens do que o grid pode acomodar.

auto-fill

mantém trilhas de colunas vazias. auto-fit colapsa essas trilhas, permitindo que os itens existentes se esticam para preencher a linha. Para um grid de cartões, você quase sempre quer Isso é um grid de cartões totalmente responsivo. Sem pontos de referência. Cada cartão tem pelo menos 280px de largura, e o navegador ajusta quantos podem caber por linha. Quando a viewport cai abaixo de 280px, ele passa para uma coluna única. Use auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

se você quiser que três cartões em uma tela larga se esticam e preencham a linha, em vez de ficarem em colunas fixas com espaço vazio ao lado. auto-fit Prototipar esse tipo de layout manualmente leva tempo. Um

gerador de grade CSS online você pode configurar visualmente colunas, linhas e margens antes de escrever uma linha — vale os dois minutos que economiza ao depurar cálculos de colunas. Áreas nomeadas: layout que pode ser lido

As áreas da grade substituem o cálculo de números posicionais por nomes legíveis. O layout ideal — cabeçalho, barra lateral, conteúdo principal e rodapé — é um dos exemplos mais claros:

string é um mapa visual do seu layout. Um ponto (

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

O grid-template-areas ) marca uma célula vazia. Renomeie uma seção alterando a string — sem números de linha para recalcular..Layouts comuns em menos de 10 linhas

Uma vez que você tenha os fundamentos, a maioria dos padrões recorrentes se reduz a poucas linhas.

Barra lateral + conteúdo:

Seções empilhadas com ritmo vertical consistente:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Grade de ícones que se auto-ajustam:

.page-sections {
  display: grid;
  gap: 4rem;
}

Inspeção de grade no Chrome DevTools

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Abra o DevTools, selecione qualquer contêiner de grade no painel Elements e procure pelo

badge de grade ao lado do elemento. Clique nele para alternar a sobreposição da grade — você obtém uma visualização de todas as colunas, linhas e margens desenhadas diretamente na página. No painel Layout

próximo ao Computed e Styles, você pode controlar o que a sobreposição mostra: números de linha, nomes de linha, nomes de áreas e linhas estendidas que projetam além da fronteira da grade. Quando um layout quebra, habilitar os números de linha enquanto observa a sobreposição geralmente revela imediatamente a linha mal alinhada — muito mais rápido do que ler os valores brutos no painel Styles. Um hábito prático: construa a estrutura no DevTools primeiro, depois commit os valores para seu estilo de folha uma vez que a grade parecer correta. O que a Grade ainda deixa para o Flexbox grid-column A Grade é a escolha certa para estruturas bidimensionais: seções da página, arranjos de cartões, painéis complexos. O Flexbox continua sendo melhor para fluxos unidimensionais — links de navegação que se envolvem, grupos de botões, entradas de formulário com rótulos inline, e em qualquer lugar onde você queira que os itens cresçam ou diminuam com base no conteúdo, em vez de um traço definido.

Na prática, você usará a Grade para o layout externo e o Flexbox para os componentes internos. Eles se combinam bem; escolha o que se adapta ao eixo do problema.

CSS Grid em Prática: Layouts Úteis Sem um Framework 2

CSS Grid em Prática: Layouts Úteis Sem um Framework 1

Flexbox ou Grid? Use os dois. O Flexbox trata um eixo — linha ou coluna. O CSS Grid trata os dois ao mesmo tempo. Essa distinção guia todas as decisões de layout que você fará.

Você também pode gostar