Para ter acesso ao vídeo referente a esse material, acesse agora https://www.upinside.com.br/beta/play/estruturando-template-utilizando-css-grid-layout
O valor grid da propriedade display do CSS é relativamente nova! Embora a maioria dos navegadores já oferecem suporte a esse recurso, não é tão comum a gente ver sites aplicando essa técnica.
O conceito de grid aqui é bem semelhante ao conceito de table, quem é dos velhos tempos de web e criou seus primeiros sites utilizando tabelas para organizar o topo, conteúdo, sidebar e rodapé vai relembrar como funcionava o mecanismo e para quem não conhece vai descobrir como foram montados milhares de sites num passado.
###De volta as origens
Com o passar do tempo, o avanço forçado do design responsivo por conta dos dispositivos mobile e ainda o surgimento do tableless (não fazer o uso de tabelas), esse conceito caiu em esquecimento e praticamente não é mais utilizado...
... mas esse termo está em alta novamente, já foi discutido na W3C e pra se ter noção até os navegadores já possuem suporte a essa feature!
###Diferença entre Flex e Grid
Quando fazemos o uso do display flex temos um plano unidimensional, isso significa que todo o conteúdo deve se adequar dentro de uma linha... Se você acompanha os nossos cursos e tem familiaridade com nosso reset.css, é basicamente a função da nossa classe container, afinal a cada dobra do seu site você adequa a largura dentro desse conteúdo e a altura é controlada automaticamente.
Já quando estamos usando o display grid a gente tem um plano bidimencional, e partir desse momento temos linhas e colunas para adequar o conteúdo da nossa página.
Você vê também como adequar e posicionar os seus elementos dentro da página de maneira muiiiito prática e dinâmica.
Quem diria que com apenas 3 propriedades CSS conseguiriamos organizar o nosso layout.
O CSS Grid Layout tem vários outros recursos de posicionamento, espaçamento, media queries, áreas que podem e devem ser estudados mais a fundo... Mas nessa aula você aprende o essencial para diagramar sua página.