Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Layout em Grade do CSS: Um Guia de Início Rápido

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

A forma como criamos layouts na web está mudando e, liderando, temos o Layout em Grade do CSS. Esse guia de início rápido pulará os detalhes e nuances, fazendo-o entrar de cabeça, agora.

Seu Navegador

Layout em Grade do CSS (conhecido como "Grid") é um trabalho em progresso e como tal o suporte dos navegadores ainda é fraco. Para começar a usá-lo, terá de usar o IE11 (com uma versão antiga da especificação), Microsoft Edge, Chrome Canary ou Firefox Nightly.

Talvez o mais fácil seja ativar funcionalidades Experimentais da Plataforma Web no Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Experimental Web Platform features in Google ChromeExperimental Web Platform features in Google ChromeExperimental Web Platform features in Google Chrome
Clique nisso

Configurando uma Grade

Grades ajudam-nos a posicionar elementos numa página, de acordo com as regiões criadas pelas guias.

Terminologia

De forma simples, essas guias (ou linhas da grade) armam trilhas horizontais e verticais da grade. Trilhas servem como linhas e colunas, com espaçamento entre elas. Na intersecção das trilhas verticais e horizontais, temos as células, algo semelhante ao que acontece com tabelas. Temos de entender todos esses termos.

Na imagem abaixo, vemos uma grade demonstração com:

  1. linhas de grade
  2. colunas
  3. linhas
  4. células
A basic grid highlighting grid lines columns rows and cells
Grade básica com: linhas de grade, colunas, linhas e células.

Para um layout gráfico, talvez fosse melhor usar exatamente essa grade, mas coloquemos outras trilhas para obtermos espaços entre as áreas de conteúdo.

  1. espaçamento
A mesma grade, agora, porém, muito parecida com a bandeira da Finlândia.

Há um último termo a esclarecer antes de seguirmos:

  1. área da grade
A grid area
Uma das várias áreas de grade da nossa grade demonstração

Uma área de grade é qualquer parte da nossa grade, cercada por quatro linhas, com qualquer quantidade de células.

Hora de construir nossa grade no navegador! Comecemos com a estrutura.

Código da Grade

Para recriar a grade acima, precisamos de um elemento recipiente, qualquer um que preferir:

Nele, posicionaremos nove elementos filhos.

Use essa "pen" como base, se quiser acompanhar. Adicionei estilos básicos para diferenciar visialmente cada item da grade.

Regras da Grade

Primeiro, declararemos que nosso elemento container é uma grade, usando um novo valor para propriedade display:

Simples assim. Depois, definiremos nossa grade, começando com quantas trilhas ela terá, tanto horizontalmente quanto verticalmente. Faremos isso usando as propriedades grid-template-columnsgrid-template-rows:

Percebamos os 5 valores para cada. Os valores de grid-template-columns dizem que "a primeira coluna terá 150px de largura, a segunda 20px, a terceira 150px" e assim vai até a quinta coluna, correspondendo, mais ou menos, à imagem da bandeira da Finlândia. Os cinco valores de grid-template-rows são algo equivalente. Cada uma terá valor auto por padrão, mas queremos precisão em nosso espaçamento, então daremos 20px de altura, por isso listaremos as cinca linhas.

Cada um de nossos itens foi atribuído uma área de grade em ordem cronológica. Não é ruim, mas o que aconteceu com os itens 2, 4 e 7? Eles pararam nos espaçamentos verticais, já que são trilhas de grade legítimas e o layout em grade assumirá que devem ficar lá se não formos específicos. É hora de adicionar algumas regras aos nossos itens.

Regras de Itens

A sintaxe disponível no momento pode ser bem complexa, mas tornaremos o mais fácil possível ao usar a versão curta da propriedade. Começaremos com o primeiro item, apontando que o queremos na grid-column 1 e grid-row 1:

Nosso item preencherá o mínimo espaço disponível entre as linhas da grade. Nosso segundo item será um pouco menos óbvio. Também queremos que comece na grid-row 1, mas queremos que pule a grid-column 2, começando na grid-column 3. A coluna 2 ficará em branco para ser o espaçamento.

Continuaremos assim, pulando pelos espaçamentos das colunas e linhas, até terminar no nono item:

Conclusão

É isso, aprendemos a criar Grades! Recapitulemos os quatro passos essenciais:

  1. Crie um elemento container e declare display: grid; nele.
  2. Use o mesmo container para definir trilhas de grade usando as propriedades grid-template-columns e grid-template-rows.
  3. Posicione os elementos filhos dentro do container.
  4. Especifique que cada filho pertence à grade, declarando sua grid-column e grid-row.

Na próxima parte da série, veremos a sintaxe mais a fundo, aprimorando a definição dos espaçamentos, explorando layouts flexíveis, a unidade fr, a função repeat(), fazendo nossa grade ir muito mais além. Até mais!

Recursos Úteis sobre Grades

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.