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

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.

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

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

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

1. área da grade

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:

1

<section class="grid-1">

2

3

</section>

Nele, posicionaremos nove elementos filhos.

1

<section class="grid-1">

2

  <div class="item-1">1</div>

3

  <div class="item-2">2</div>

4

  <div class="item-3">3</div>

5

  <div class="item-4">4</div>

6

  <div class="item-5">5</div>

7

  <div class="item-6">6</div>

8

  <div class="item-7">7</div>

9

  <div class="item-8">8</div>

10

  <div class="item-9">9</div>

11

</section>

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:

1

.grid-1 {

2

  display: grid;

3

}

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

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 20px 150px 20px 150px;

4

  grid-template-rows: auto 20px auto 20px auto;

5

}

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:

1

.item-1 {

2

  grid-column: 1;

3

  grid-row: 1;

4

}

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.

1

.item-2 {

2

  grid-column: 3;

3

  grid-row: 1;

4

}

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

1

.item-9 {

2

  grid-column: 5;

3

  grid-row: 5;

4

}

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

• @rachelandrew - siga Rachel Andrew e saberá de tudo.