Desenvolvimento Web / CSS e CSS3

Estruturando template utilizando CSS Grid Layout

Aprenda e estruturar a grid master do seu layout a partir de um png, defina as linhas e colunas antes de iniciar sua marcação HTML para evitar retrabalho e organizar da melhor forma as informações dentro da sua página.

Por Gustavo Web

Publicado por Gustavo Web
em 22/11/2017 às 14h42

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

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.

Material de Apoio

É claro que não poderia faltar o material de apoio dessa aula, então eu disponibilizo aqui o layout.ai que é o arquivo do Illustrator que eu usei como base e também o projeto final, para efetuar o download só clicar aqui!

Aquele forte abraço e a gente se vê numa próxima :)

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: