CSS Grid um novo jeito de fazer Layout Parte 2

CSS Grid um novo jeito de fazer Layout Parte 2

25/08/2018 0 Por Alisson Suassuna

Olá galera, no artigo dessa semana, vamos dar continuidade a série de publicações sobre CSS Grid um novo jeito de fazer Layout Parte 1, neste abordaremos mais propriedades para fazer layouts muito mais completo, responsivo de maneira fácil e inteligente, então chega de conversa e vamos ao código base para começarmos nossos estudos.

Aviso: Haverá propriedades nos exemplos que já foram explicados em nosso primeiro artigo, caso tenha alguma dúvida voltar na parte 1.

Código base – CSS Grid

CSS GRID

Imagem do Firefox

O código base já estamos familiarizados, o <style> aplicado servirá para facilitar as demonstrações do CSS Grid. Em breve pretendo fazer uma série de artigos sobre CSS3 desde do básico ao avançado, então se você não é inscrito do blog recomendo se inscrever para não perder nenhuma novidade.

Propriedades Personalizadas com Nome

Em nosso código base temos a propriedade grid-template-columns: 1fr 1fr 1fr; estamos usando a unidade fr explicada no primeiro artigo da série, mas concordam comigo que é um pouco confuso a primeira vista? Pensando nisso os mantenedores do CSS3 colocaram a possibilidade de darmos um “alias” ás propriedades (alias = apelido) para aplica esse “alias” escrevemos dessa forma:

Observe que colocamos um nome para cada linha do template, agora vamos manipular essas linhas com os nomes.

Em nosso layout temos 4 linhas, para cada linha atribuímos um nome, então selecionamos o primeiro elemento cujo nome da classe CSS é “d1”, esse elemento selecionado vai ter seu início a partir da primeira linha do elemento 3 até a ultima linha desse mesmo elemento, como consequência os outros elementos vão para linha debaixo. Veja o resultado no Firefox.CSS GridPodemos também usar uma sintaxe mais reduzida para aplicar o mesmo comportamento.

CSS Grid

Propriedade grid-area

Essa propriedade nos possibilita aplicar as configurações em todos os sentidos, como o próprio nome ja diz, aplicamos em toda área do grid, ela recebe quatro atributos, são eles: row-start, column-start, row-end e column-end.

Aqui estamos dizendo para o grid sair da linha 1 depois dar um salto de 3 linhas (span 3), sair da linha do meio da coluna até o fim. Veja o resultado no firefox.

CSS Grid

Propriedade gap

A propriedade gap é bem interessante, com ela podemos configurar um espaço entre as colunas do CSS Grid ou nas linhas, lembrando que temos que aplicar no elemento onde definimos o display: grid, em nosso caso foi no elemento <body>

CSS Grid

Pessoal se gostou desse artigo aperta no botão curtir, compartilha para seus colegas isso ajuda bastante na divulgação do blog. Deixa seu comentário com elogios, criticas, sugestões de temas que vocês queiram ver aqui.

Recomendação de Estudo

A recomendação de hoje é esse curso de CSS3, onde aprenderemos os seguintes tópicos

  1. Trabalhar com técnicas CSS usadas por profissionais do mundo todo
  2. Escrever e estruturar melhor o CSS, dando ensejo a códigos mais profissionais

  3. Usar uma arquitetura CSS robusta, validada por experts internacionais

  4. Conhecer dicas, técnicas e ferramentas CSS para dar um passo adiante na carreira