Começando com o novo CSS Grid Layout

Olá, Web Developers!

Chrome e Firefox finalmente lançaram uma atualização onde há suporte total à especificação de CSS Grid Layout. Antes esse suporte era apenas parcial.

“Ué, mas já fazemos isso com ferramentas como 960gs, unsemantic e bootstrap há muito tempo.”

Sim, mas para isso é necessário colocar uma biblioteca inteira no nosso projeto apenas para utilizarmos uma meia dúzia de classes.

Essa especificação indica propriedades que nos ajudam a criar grids diretamente no nosso CSS, e mais algumas facilidades que às vezes é chatinho de se fazer.

“Mas não criaram o FlexBox para facilitar exatamente a criação de layouts?”

A ideia principal do FlexBox é ajudar a trabalhar com uma coluna. Então podemos utilizá-lo para organizar itens dentro de uma coluna mas, para trabalhar com várias colunas, as Grids podem ser mais úteis.

Isso porque com as Grids podemos indicar quantas colunas ficarão disponíveis para cada tamanho de tela, fazendo com que fique mais fácil indicarmos quando um elemento deve ir para baixo ou para outro lugar se estivermos em uma tela menor. Também podemos indicar o número de linhas.

Curso Symfony - Gerenciando aplicações com Symfony Flex

Conhecer o curso

Começando com Grids

Primeiro vamos começar com um HTML bem simples, que utilizaremos para todos os nossos exemplos.

Temos basicamente dois tipos de elementos: o container e os itens.

<div class="container">
  <div class="item item-1">a</div>
  <div class="item item-2">b</div>
  <div class="item item-3">c</div>
  <div class="item item-4">e</div>
  <div class="item item-5">f</div>
  <div class="item item-6">g</div>
  <div class="item item-7">h</div>
</div>

E agora um CSS bem simples:

.container{
  display: grid;
  background-color: rgba(0,0,0,0.5);
  height: 300px;
  grid-template-columns: 40px 80% auto;
  grid-template-rows: 30px 20% auto;
}

.item{
  border: 1px solid black;
  background-color: white;
}

O que fizemos aqui? Na classe .item eu apenas coloquei uma borda e uma cor de fundo para podermos enxergar melhor cada item.

Na classe .container é que fizemos a brincadeira. Coloquei uma cor apenas para podermos ver onde está os limites do container.

Para começar a utilizar o Grid Layout, o nosso container têm que ter o display com o valor grid. Isso irá criar grids do tipo block.

Também há o inline-grid para criar grids do tipo inline e o subgrid, que serve para quando o container de uma grid também é um item de outro container de grid.

Em seguida conhecemos dois novos amigos: grid-template-columns e grid-template-rows.

Em grid-template-columns nós passamos as medidas que queremos para cada coluna. Se quiser acrescentar uma coluna nova é só adicionar um novo valor ali. No exemplo passamos uma coluna com uma medida em px e outra em %. A última colocamos auto. Este valor faz com que o elemento preencha todo o espaço restante.

Em grid-template-rows temos exatamente a mesma coisa, mas para linhas. Como no CSS precisamos que o container possua uma altura definida para que alturas dinâmicas funcionem, passei um valor fixo de 300px. Assim os valores em % e auto irão funcionar.

(Para o exemplo abaixo funcionar, certifique-se de estar utilizando a última versão do Chrome ou Firefox.)

Só com isso já poderíamos parar por aqui. Já tá bonito! Mas vamos ver um pouco mais.

Podemos também nomear cada coluna ou linha:

.container{
  /***********/
  grid-template-columns: [primeira] 40px [col_2] 80%  [ultima] auto;
  /***********/
}

Para isso, basta colocar o nome desejado entre [] antes da medida da coluna/linha.

Caso queira repetir um valor um determinado número de vezes, podemos utilizar a função repeat():

.container{
  /***********/
  grid-template-columns: repeat(3, 20px) auto;
  /***** equivalente a ******/
  grid-template-columns: 20px 20px 20px auto;
}

“Mas e esse ‘auto’ aí? Tem como ter mais controle sobre o espaço disponível?”

Tem sim.

Temos uma unidade de medida chamada fr. Ela indica uma fração do espaço disponível em uma grid.

.container{
  /***********/
  grid-template-columns: 1fr 50px 2fr;
  /***********/
}

Os valores que não são dinâmicos são calculados primeiro. Então no exemplo acima, primeiro é calculado o “50px”. Depois é calculado o espaço disponível e então ele é distribuído para as frações que indicamos.

No nosso caso, colocamos 1fr e depois 2fr, o que totaliza 3fr. A primeira coluna ficará com 1/3 e a última ficará com 2/3 do espaço disponível.

E não precisamos indicar uma medida fixa para o fr funcionar.

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código acima, cada uma das colunas ficará com 1/3 do espaço disponível.

Bom, essa foi apenas um introdução ao Grid Layout. Ainda há muito mais o que se aprender.

E você? Já utilizava o Grid Layout antes de ser lançado? Se não conhecia, gostou ou achou mais difícil?

Compartilhe com a gente aí nos comentários!

Curso Teste de Software Básico

Conhecer o curso