CSS Grid: layouts em linhas e colunas
Desenhe relações em duas dimensões sem prender a página em pixels.
Seu progresso neste dispositivo
0 de 6 aulasVocê escolhe quando uma aula está concluída.Começar o cursoPrograma do curso
Do primeiro conceito ao projeto
CSS Grid começa pelo container, tracks e linhasCrie uma grade explícita, reconheça linhas, colunas, células e itens e aprenda a enxergar a malha antes de posicionar conteúdo.PendenteCrie tracks flexíveis com fr, repeat e minmaxSubstitua colunas rígidas por frações, repetições e limites que dividem o espaço disponível sem abandonar o tamanho mínimo do conteúdo.PendentePosicione itens no Grid por linhas e spanUse linhas numeradas, grid-column, grid-row e span para destacar conteúdo sem tirar os elementos do fluxo da grade.PendenteNomeie regiões com grid-template-areasDescreva cabeçalho, navegação, conteúdo e rodapé com áreas nomeadas e adapte o desenho responsivo sem mover o HTML.PendenteControle a grade implícita e o auto-placementEntenda onde itens extras são colocados, dimensione tracks implícitos e alinhe células sem embaralhar a ordem de leitura.PendenteProjeto Grid: construa um painel responsivoCombine áreas, tracks e repetição automática num painel que muda de estrutura conforme o espaço e usa Flexbox apenas nos grupos lineares.Pendente
Depois da leitura
Continue estudando nos canais do Grupo Club
Os vídeos são complementares. Todo conceito, exercício e critério de conclusão já está explicado nas aulas em texto.
Prefere aprender em vídeo?
Tem aula sobre este assunto no nosso canal.
- DevClub no YouTubeAprendendo CSS DISPLAY GRID com um ProjetoAssistir no YouTube
- DevClub no YouTubeLIVE #36 Como programar uma calculadora do zero | CSS Display GRID + JavascriptAssistir no YouTube