/Desenvolvimento

voltar
/Desenvolvimento

Adeus Flexbox! Bem-vindo CSS Grid Layout!

PorSimone Amorim em

O futuro chegou!

Finalmente ganhamos algo mais importante do que uma especificação boa; ganhamos a implementação de uma especificação boa nos principais browsers <3.

Até o momento, usamos gambiarras para a criação de layouts com CSS, porque, até então, não existia nada voltado especificamente para essa função. Legal, temos flexbox, mas relaxa aí e lê até o final…

Do antes ao agora

Nos primórdios, usávamos uma tabela, que foi uma forma de facilitar a criação de layout – o que em contra partida retornava uma série de problemas. Em seguida, iniciamos a utilização do float no lugar das tabelas, o que nos ajudou muito por ser mais flexível e usar menos código HTML. Mas o float não foi feito pra isso. Só quem usou sabe como era triste e limitado.

Pra ajudar a alinhar e distribuir o espaço entre itens em um container, surgiu o CSS Flexbox Layout (Flexbox), onde a ideia principal é dar ao container a capacidade de alterar a largura / altura e ordem de seus itens para um melhor preenchimento do espaço disponível e, principalmente, para acomodar todos os tipos de dispositivos de exibição e tamanhos de tela. Mas o amado flexbox não resolve todos os problemas e também não foi criado para resolvê-los, principalmente quando o assunto são interfaces complexas.

Hoje, oficialmente estamos no futuro e temos suportado nos browsers uma opção realmente disruptiva no quesito “criar layouts” com CSS, lhes apresento o seu novo Deus.

O que é CSS Grid Layout?

É uma especificação da W3C que disponibiliza um novo modelo de layout para o CSS com uma poderosa habilidade para controlar o tamanho e posição dos elementos e seus conteúdos.

Sim, mas devo usar Flexbox ou Grid Layout?

Flexbox é para layouts unidimensionais – qualquer coisa que precisa ser disposta em uma linha reta.

See the Pen Flexbox Example by Simone Amorim (@simoneas02) on CodePen.

Já o Grid Layout é a solução certa quando você deseja controlar o dimensionamento e o alinhamento em duas dimensões.

See the Pen Grid Layout Example by Simone Amorim (@simoneas02) on CodePen.

Terminologia

Antes de iniciar o trabalho com Grid Layout, é necessário entender os termos que vem junto com a especificação. Explicarei cada um deles para facilitar o entendimento dos exemplos posteriores.

Grid Lines

São as linhas que definem o grid, que podem ser distribuídas de forma horizontal ou vertical. Futuramente, poderemos nos referir a elas por um número ou por um nome que pode ser definido pelo desenvolvedor.

Grid Tracks

É o espaço horizontal ou vertical entre duas Grid Lines.

Grid Cell ou Grid Item

É o espaço entre quatro Grid Lines, sendo a menor unidade em nosso grid. Conceitualmente, podemos fazer uma analogia com uma célula de tabela.

Grid Areas

É qualquer espaço no Grid usado para exibir um ou mais Gid Cells/ Items.

Grid Containers

É o pai direto de todos os itens do grid, sendo o elemento que recebe a propriedade display: grid.

No exemplo abaixo, .container-box é o Grid Container.

 <div class="container-box">    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

Grid items

São os itens que representam o conteúdo do grid; cada filho direto do grid container torna-se um grid item.

No exemplo abaixo, cada elemento .box é um grid item, porém o .sub-box não.

  <div class="container-box">
    <div class="box"></div>
    <div class="box">
      <div class="sub-box"></div>
    </div>
    <div class="box"></div>
  </div>

Definindo um Grid

Para definir um grid use os novos valores da propriedade display display: grid ou display: inline-grid, assim que for definido uma dessas propriedades no .container-box, todos os filhos diretos desse elemento se tornarão itens do grid automaticamente.

O display: grid gera um Grid container com comportamento de bloco.

  .container-box {
    display: grid;
}

display: inline-grid gera um Grid container com comportamento inline.

  .container-box {
    display: inline-grid;
}

Line-base placement

Para definir as colunas e linhas do grid, use as propriedades grid-template-columns e grid-template-rows.

Cada valor atribuído a propriedade grid-template-columns representa uma coluna que assumirá o tamanho do valor que lhe for atribuído, assim como a propriedade grid-template-rows assumirá o espessura do valor que lhe for atribuído.

Use as propriedades grid-column-gap e grid-row-gap para especificar o espaçamento entre as columns e as rows do grid.

  .container-box {
    display: grid;
    grid-template-columns: 50px 100px 150px 200px;
    grid-template-rows: 50px 100px 150px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

Podemos usar o shorthand grid-gap para passar os dois valores de uma só vez.

  ...
    grid-gap: 20px;  
  ...

Line-base position

Define onde está localizado um grid item no grid container, fazendo referência a uma grid line específica.

Use grid-column-start e grid-row-start para especificar a grid line, onde o item começa e grid-column-end e grid-row-end para especificar a grid line onde o item termina.

  .box {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: 4;
    grid-row-end: 4;
  }

Veja um exemplo de line-base-position.

Podemos usar um shorthand para facilitar:

  .box {
    grid-column: 1/4; /* grid-column-start / grid-column-end */
    grid-row: 2/4; /* grid-row-start / grid-row-end */
  }

Ou ainda menor com o grid-area:

 .box {
    grid-area: 1 / 2 /4 / 4; /* grid-column-start / grid-row-start / grid-column-end / grid-row-end */
  }

Area naming

No grid container podemos manipular a posição e comportamento dos grid itens. Isso através da propriedade grid-template-areas, onde podemos literalmente montar todo o nosso layout em apenas uma propriedade. Para facilitar e atribuir mais semântica ao que estamos fazendo, atribuímos um nome aos nossos grid itens através da já conhecida grid-area.

See the Pen Grid Area Example by Simone Amorim (@simoneas02) on CodePen.

É isso mesmo que você viu. Relaxe e tente viver com essa realidade.

Já roda em todos browsers?

Aqui entra a melhor parte e o motivo de eu estar compartilhando esse conteúdo com vocês: essa tecnologia já está por aí há bastante tempo, mas recentemente o Firefox e o Chrome anunciaram o suporte para essa maravilha.

Veja por você mesmo no Can I Use.

Quer saber mais?

Conclusão

Esse artigo foi apenas uma pincelada em algumas das features que eu lembrei de cabeça aqui na hora, mas acreditem: a especificação tem MUITO mais a oferecer.

Comente!

Se quiserem saber mais sobre o assunto, podem me seguir por aí. Se tiverem alguma dúvida, mandem comentários ou gritem nas redes sociais:

Deixe um comentário! 11

11 comentários

Comentários

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. Ok, Meus parabéns Simone! Isso tudo é muito lindo e maravilhoso na teoria!!!
    Talvez para os Papas do css, estes quadrinhos rabiscados, bastam… Infelizmente para mim, que tem pouco tempo de estrada, ainda me parece um tanto confuso!!!
    Então, porque até o momento, nenhum dos expert neste assunto de “css grid layout” apresentou o workflow de um site completo?
    Ou pelo menos apresentou referencias de sites que já usaram esta nova técnica CSS, com avaliação e validação do código pela W3C?

    Outra coisa, os exemplos mostrados exibem apenas um ou dois tipos de layout básico:
    1, que ocupa 100% da viewport horizontal, e outro com o container totalmente centralizado…
    Eu gostaria de ver pelo menos um exemplo com o header/footer espandindo-se para as laterais (100% vh) e o container centralizado com width menor,
    com seus demais conteúdos internos, já formatados com suas propriedades responsivas. É possível?

    Parabéns e grato por nos ensinar!!!
    Gilmar

    1. Opa Gilmar, tudo bem?

      A Rachel já usa em todos os sites dela (https://gridbyexample.com/), você pode usar o inspetor de elementos pra identificar as propriedades, lembrando que o intuito do título do artigo é repassar que tanto o Flexbox quanto outras ‘gambiarras’ antes utilizadas para ‘layoutar’ páginas ficaram para trás com o surgimento do CSS Grid, porém essas duas tecnologias se completam e seu uso em conjunto é essencial, onde cada uma tem sua funcionalidade específica quando se fala em criar layout(CSS Grid) e organizar os componentes dentro do layout(Flexbox).

      O resumo abaixo que recebi do Maujor, explica de forma fácil a separação de responsabilidades entre CSS Grid e Flexbox:

      “De maneira geral, guardadas as particularidades de cada caso, pode-se dizer que Flexbox se aplica à criação de componentes do layout (mecanismos de navegação, widgets, formulários, etc…) e Grid Layout à criação do layout como um todo (topo, rodapé, colunas, áreas de layout complexo na página, etc…).”

      Abraços ;)

      1. Ok Simone, grato pelo seu feedback!!!
        Tudo bem…Aliás, não tão bem quanto vc, mas um dia chego lá… Ao que tudo indica, vamos ter que reaprender a programar as folhas de estilo, pois tudo o que vínhamos fazendo até a presente data, não passou de uma grande gambiarra codificada…
        Posso até concordar com isso, em parte… Afinal, a Web cresceu, evoluiu e chegou até aqui, com ou sem gambiarras na formatação, aos trancos e barrancos, e ainda assim quase tudo pode ser feito através dela. Talvez o próximo salto, seja possível o envio e download de objetos sólidos, quiçá, orgânicos e vivos…”Scott, mande-me as coordenadas”. Imagine vc, como seria o estilo de formatação de um treco desses?
        Enfim, quando um novo conceito surge, com ele, vem novas técnicas e formas de entender e fazer as coisas.. Agora, é suportar a dor, da curva da estranheza e seguir em frente. Grato. Lhe desejo sucesso!

leia mais
Este projeto é mantido e patrocinado pelas empresas: