CSS Grid Layout: Guia Absolutamente Completo

Tempo de leitura: 10 minutos

O CSS Grid Layout é uma especificação que foi criada para proporcionar um método diferenciado na hora de criar layouts com o CSS, com o objetivo de permitir ao desenvolvedor transformar determinados itens da página em layouts, fazendo uso de linhas e colunas.

O interessante deste método é que ele possibilita a divisão de uma página em regiões, definindo o relacionamento das medidas, camadas, posicionamentos e os mais diferentes componentes da marcação HTML.

Bem com as tabelas, o Grid Layout permite que o desenvolvedor alinhe todos os itens da página, lançando mão de linhas e colunas. A diferença é que, no Grid, você não se baseia somente no conteúdo, de modo que se torna possível criar vários layouts, coisa que não se consegue utilizando a tabela.

Um exemplo disso é que os elementos originados no Grid Container podem ser posicionados de acordo com a sua vontade, tanto sobrepondo quanto mudando de layer. Parecido com o que se faz utilizando o posicionamento CSS.

E é justamente para facilitar seu trabalho e permitir que você lance mão desta incrível ferramenta que nós resolvemos criar este Guia Absolutamente Completo do CSS Grid Layout.

Nas linhas abaixo você vai entender mais de 20 funcionalidades do Grid Container e do Grid Item, que compõem o Grid Layout. Bora lá?!

O que iremos estudar hoje?

// CSS Grid Layout: Grid Container

// Grid Item

CSS Grid Layout: Grid Container

css grid container

O Grid Container, como o nome sugere, é a tag que determina os itens do Grid e pode ser feita indicando display: grid. Dentro desta tag, podemos utilizar as funcionalidades que veremos a seguir:

Display

O Display é utilizado para definir um determinado código como um Grid Container e pode ser feito da seguinte maneira:

display: grid;

// Torna o elemento um grid container.

display: inline-grid;

// Torna o elemento um grid container porém com comportamento inline.

display: subgrid;

// Para grids dentro de grids (ainda não é suportado, porém você pode normalmente colocar display: grid; no grid dentro do grid que funciona).

Grid Template Columns

Aqui, você consegue definir o número total de colunas que devem ser criadas dentro do Grid:

grid-template-columns: 100px 100px 100px 100px;

// Quatro colunas de 100px de largura são criadas

grid-template-columns: 1fr 2fr;

// Duas colunas são criadas, sendo a segunda com o dobro do tamanho da primeira. fr é uma unidade fracional. O tamanho do conteúdo é respeitado, ou seja, se o conteúdo na primeira coluna for maior que o da segunda, a primeira será maior.

grid-template-columns: minmax(200px, 1fr) 1fr 1fr;

// Três colunas são criadas, a primeira terá no mínimo 200px de largura e no máximo 1fr(isso significa que após 200px ela se expande da mesma forma que as outras colunas). As outras duas colunas vão ter 1fr.

grid-template-columns: repeat(3, 1fr);

// Cria 3 colunas com 1fr de tamanho. O repeat seria a mesma coisa que escrever 1fr 1fr 1fr.

grid-template-columns: repeat(auto-fit, minmax(100px, auto));

// Cria automaticamente um total de colunas que acomode itens com no mínimo 100px de largura.

Grid Template Rows

A partir desta funcionalidade, você será capaz de definir exatamente quantas linhas haverá no seu Grid:

grid-template-rows: 50px 100px 50px 150px;

// Cria 4 linhas no grid, sendo a primeira com 50px, segunda 100px, terceira 50px e quarta 150px. Caso o grid necessite de mais linhas, elas terão o tamanho de acordo com o conteúdo.

grid-template-rows: 1fr 2fr;

// Cria 2 linhas no grid, sendo a segunda com cerca de duas vezes o tamanho da primeira.

Grid Template Areas

É através do Template Areas que lhe será permitido criar as áreas específicas no Grid e, no caso das áreas vazias, elas podem ser criadas utilizando o ponto (.):

grid-template-areas:

“logo nav nav”

“sidenav content advert”

“sidenav footer footer”;

// Cria 3 colunas e 3 linhas. [logo] ocupa a coluna 1, linha 1. [nav] ocupa da coluna 2 a 3, linha 1. [sidenav] ocupa a coluna 1, da linha 2 a 3. [content] ocupa a coluna 2, linha 2. [advert] ocupa a coluna 3, linha 2. [footer] ocupa da coluna 2 a 3, linha 3

Grid Template

Para ganhar tempo, você pode utilizar o Grid Template como um atalho para definir o tamanho tanto do Grid Template Columns e Rows quanto do Areas:

grid-template:

“logo nav nav” 50px

“sidenav content advert” 150px

“sidenav footer footer” 100px

/ 100px 1fr 50px;

// A primeira linha com 50px, segunda com 150px e terceira com 100px. A primeira coluna com 100px, a segunda 1fr e a terceira com 50px.

Grid Gap

Aqui é onde você poderá definir o gutter (chamado de gap) entre os diversos elementos do Grid:

grid-gap: 20px

// Define 20px entre os elementos do grid (linha e coluna).

grid-column-gap: 20px

// Define 20px de distântica entre as colunas.

grid-row-gap: 20px

// Define 20px de distântica entre as linhas.

Grid Auto Columns

Outra maneira de poupar tempo é utilizando este comando, que gera automaticamente o tamanho das colunas do Grid implícito, toda vez que um elemento é posicionado em uma coluna que não tiver sido previamente definida:

grid-auto-columns: 100px

// As colunas implicitas, geradas automaticamente, terão 100px de largura.

Grid Auto Rows

Tal qual o Auto Columns o Auto Row define automaticamente o tamanho das linhas toda vez que um elemento for posicionado em uma linha sem definição prévia:

grid-auto-rows: 100px

// As linhas implicitas, geradas automaticamente, terão 100px de altura.

Grid Auto Flow

Esta funcionalidade é bem bacana porque ela permite que você defina o fluxo dos itens dentro do seu Grid. Ou seja, eles irão gerar – automaticamente – novas linhas e/ou colunas:

grid-auto-flow: row

// Automaticamente gera novas linhas.

grid-auto-flow: column

// Automaticamente gera novas colunas.

grid-auto-flow: dense

// Tenta posicionar o máximo dos elementos que existirem nas primeiras partes do grid (pode desorganizar o conteúdo).

Grid

Esta funcionalidade é outro atalho, que lhe permite definir os seguintes o Grid Template Rows, Template Columns, Template Areas, Auto Rows, Auto Columns e Auto Flow:

grid: 100px / 1fr 1fr

// Gera uma linha com 100px de altura e 2 colunas com 1fr.

grid: 100px / auto-flow 100px 50px

// Gera uma linha com 100px de altura. O grid-auto-flow é definido como column (pois está logo antes da definição das colunas). Ele também define o grid-auto-columns com 100px 50px

Justify Content

Aqui é onde você poderá justificar todos os itens do seu Grid, em relação ao eixo horizontal (chamado de eixo X):

justify-content: start

// Justifica os itens ao início.

justify-content: end

// Justifica os itens ao final.

justify-content: stretch

// Estica os itens.

justify-content: space-around

// Distribui espaço entre os elementos. (O início e final são menores que os espaços internos).

justify-content: space-between

// Cria um espaço entre os elementos, ignorando o início e final.

justify-content: space-evenly

// Cria um espaço igual entre as colunas (no início e final também).

justify-content: center

// Centraliza o conteúdo.

Align Content

Já aqui, é onde você conseguirá alinhas os elementos em relação ao eixo vertical, chamado de eixo Y:

align-content: start

// Alinha os itens ao início.

align-content: end

// Alinha os itens ao final.

align-content: stretch

// Estica os itens.

align-content: space-around

// Distribui espaço entre os elementos. (O início e final são menores que os espaços internos).

align-content: space-between

// Cria um espaço entre os elementos, ignorando o início e final.

align-content: space-evenly

// Cria um espaço igual entre as colunas (no início e final também).

align-content: center

// Centraliza o conteúdo.

Justify Items

Esta funcionalidade permite que você justifique, em relação à célula, os elementos do grid quanto ao eixo horizontal (X):

justify-items: start

// Justifica os itens ao início.

justify-items: end

// Justifica os itens ao final.

justify-items: center

// Centraliza o conteúdo.

justify-items: stretch

// Estica os itens.

Align Items

E por último, mas não menos importante dentro do Grid Container nós temos o align-items, que lhe permitirá alinhas o conteúdo dos elementos do grid, em relação à célula, quanto ao eixo vertical (Y):

align-items: start

// Alinha os itens ao início.

align-items: end

// Alinha os itens ao final.

align-items: center

// Centraliza o conteúdo.

align-items: stretch

// Estica os itens.

Grid Item

css grid item

O Grid Item nada mais é do que, como o nome sugere, itens filhos do Grid Container. E, justamente por isso, eles podem ser tanto implícitos (quando é gerado automaticamente a fim de preencher o conteúdo) quanto explícitos (quando você é quem define).

E é aí que teremos as seguintes funcionalidades:

Grid Column

Aqui é onde você vai poder definir quais colunas devem ser ocupadas pelo Grid Item. O interessante é que você pode escolher uma linha de início e final, desta maneira, o elemento acabará com ocupar diversas colunas:

grid-column: 1

// O item ocupará a coluna 1.

grid-column: 1 / 3

// O item ocupará a coluna 1 e 2 (Sim, isso mesmo, 1 e 2, pois os valores 1 / 3 são referentes as linhas da coluna. Isso significa que começa na linha 1 (início do grid) e vai até a linha 3, que é o começo da terceira coluna).

grid-column-start: 2

// O item vai começar na linha 2.

grid-column-end: 4

// O item vai terminar na linha 4.

grid-column: span 2

// O item irá ocupar duas colunas a partir de onde ele estiver.

Grid Row

Aqui é onde você irá definir as linhas que serão ocupadas pelo Grid Item. Todavia, é preciso cuidado na hora de definir pois as grid lines são diferentes da row.

Enquanto a grid line se refere exatamente a linha do grid, a row se refere somente a linha. De modo que, dentro de uma row, sempre existirão duas grid lines, uma no início da row e outra no final:

grid-row: 1

// O item ocupará a linha 1.

grid-row: 1 / 3

// O item ocupará a linha 1 e 2 (Sim, isso mesmo, 1 e 2, pois os valores 1 / 3 são referentes as linhas do grid. Isso significa que começa na linha 1 (início do grid) e vai até a linha 3 do grid, que é o começo da terceira linha).

grid-row-start: 2

// O item vai começar na linha do grid 2.

grid-row-end: 4

// O item vai terminar na linha do grid 4.

grid-row: span 2

// O item irá ocupar duas linhas a partir de onde ele estiver.

Grid Area

Através desta funcionalidade você poderá definir a área do elemento do grid, tornando-se assim um atalho para o Grid Row Start, Column Start, Row End e Column End.

Além disso, você pode utilizar o z-index para manipular a posição do eixo Z. Quer dizer, caso um item precise ser posicionado em cima do outro, vai ser o z-index que irá controlar qual aparece na frente:

grid-area: 1 / 2 / 4 / 3;

// Este é um atalho para:

grid-row-start: 1;

grid-column-start: 2;

grid-row-end: 4;

grid-column-end: 3;

grid-area: header;

// Vai posicionar o item na área definida como header.

Justify Self

Aqui você poderá, em relação à célula, justificar o elemento quanto ao eixo X:

justify-self: start

// Justifica o item ao início.

justify-self: end

// Justifica o item ao final.

justify-self: center

// Centraliza o conteúdo.

justify-self: stretch

// Estica o item.

Align Self

E por último, mas não menos importante dentro do Grid Item, o Self lhe permite justificar um elemento, em relação à célula, quanto ao eixo Y:

align-self: start

// Alinha o item ao início.

align-self: end

// Alinha o item ao final.

align-self: center

// Centraliza o conteúdo.

align-self: stretch

// Estica o item.

Conclusão

conclusao css grid layout

Como você pode ver acima, os comandos não são complicados e, a partir deles, você será capaz de trabalhar muito mais rápido e criar projetos cada vez mais incríveis!

Portanto, tecle CTRL+D e adicione este artigo aos seus favoritos, para voltar aqui sempre que surgir uma dúvida e, claro, não esqueça de conhecer o curso de Front-end mais completo do Brasil, clique aqui e veja o que iremos aprender lá.