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 a aula
DevClub no YouTubeLIVE #36 Como programar uma calculadora do zero | CSS Display GRID + JavascriptAssistir a aula