$cat~/glossario/css-grid.md

CSS Grid

CSS

Layout bidimensional com linhas e colunas explícitas.

css-grid.mdmarkdown
01

seção

Explicação

CSS Grid — Layout bidimensional com linhas e colunas explícitas.

Grid 2D — grid-template-columns/rows, gap, fr unit, grid-area named layout.

Flex 1D vs Grid 2D choice.

02

seção

Exemplo

snippetcss
.layout {  display: grid;  grid-template-columns: 240px 1fr;  gap: 1.5rem;}
03

seção

Modo de uso

  • Dashboard holy grail

  • Responsive grid repeat auto-fit minmax

  • Overlap grid areas

04

seção

Armadilhas comuns

  • Implicit row size unexpected

  • Old browser subgrid check if needed

05

seção

Termos relacionados