A Web: HTML e CSS
🔲 CSS Grid
Layouts bidimensionais com CSS Grid: grades, posicionamento de itens, áreas e design responsivo sem media queries.
O que você vai aprender
- Construir grades bidimensionais com
display: grid,grid-template-columns/rows, a unidadefregap - Posicionar itens por linhas e com
spanusandogrid-columnegrid-row - Montar páginas legíveis com
grid-template-areasegrid-area - Criar galerias de cartões responsivas sem media queries usando
repeat(),minmax()eauto-fit
Lições
Grid básico: linhas, colunas e a unidade frdisplay: grid, grid-template-columns/rows, a unidade fr e gap. Posicionar itens: linhas, span e áreasgrid-column, grid-row, span e grid-template-areas + grid-area. Responsivo sem media queries: auto-fit e minmaxrepeat(), minmax() e auto-fit / auto-fill para cartões fluidos.Pratique este módulo no app
O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.
Comece grátis no app →