CSS Grid - o grande guia para aprender a trabalhar com CSS Grid layouts

10 min.
CSS Grid Layouts - The Complete Guide to Learning CSS Grid

O Flexbox já deve ser familiar a toda a gente e já deu a muitos desenvolvedores e desenvolvedoras uma noite tranquila. Mas e se pudesses expandir o teu layout Flexbox não só verticalmente mas também horizontalmente? Isto e muito mais é possível desde a integração de CSS Grid.

Imagina se houvesse uma forma de desenhar livremente o teu site numa grelha bidimensional. Por exemplo, ao criares blocos de texto que se sobrepõem parcialmente a imagens. Ou ainda galerias de imagens mais complexas sem margem negativa ou posicionamento. Ou, com a ajuda do CSS, podes rapidamente desenhar modelos de páginas que também sejam responsivos. Existe uma solução para tudo isto: CSS Grid.

O que é CSS Grid?

Semelhante ao Flexbox, CSS Grid está também integrado com a ajuda de um container element e itens de CSS Grid. Por exemplo, também encontramos algumas propriedades para o posicionamento do Flexbox: alinhar itens, justificar itens, auto justificar e auto alinha. Estas ajudam-te a posicionar o conteúdo da tua grelha em conformidade.

Grosso modo, CSS Grid é uma caixa flexível que funciona bidimensionalmente:

What-Is-CSS-Grid
Como funciona o Grid System com Bootstrap

Enquanto com o Flexbox só podemos construir linhas e colunas correspondentes na horizontal, CSS Grid dá-nos a possibilidade de as organizar verticalmente também:

CSS Grid Layout
CSS Grid é uma ferramenta poderosa para a criação de layouts bidimensionais na web.

À primeira vista, CSS Grid pode parecer relativamente pouco espetacular. Afinal de contas, é possível alcançar o mesmo resultado com linhas e colunas.

O que torna CSS Grid tão especial?

Com o novo Grid System, é possível construir todas as combinações concebíveis. A única condição é que devem ser retangulares. As formas puras em L, por exemplo, não podem ser construídas.

Desta forma, podes planear e construir todo o layout da tua página com base em CSS Grid. As grelhas aninhadas são tão possíveis como a combinação de CSS Grid e Flexbox.

Através de um planeamento inteligente, podes agora também programar os teus layouts de forma a poderes prescindir, na medida do possível, de media queries, mas é claro que não tens de o fazer. Mais tarde abordarei as várias possibilidades com mais detalhe.

CSS Grid também vem com uma série de outros novos truques CSS que irão facilitar a tua vida no futuro. Uma delas é a nova unidade CSS: a chamada fração (fr). Isto funciona de forma semelhante à divisão do tamanho dos itens do flexbox. 

Uma fração (1fr) é uma parte de uma fila inteira. Assim, se dividires a tua grelha em 3×4 como no exemplo abaixo de CSS Tricks, então 1fr = ¼ ou 25 %.

Uma outra característica especial também surge aqui: Nem todas as caixas têm de ser preenchidas com conteúdo. Também podes atribuir conteúdo vazio no CSS Grid:

CSS-Grid-Empty-Space
Conteúdo vazio no CSS Grid

W3Schools mostra outros layouts possíveis para os quais as CSS Grid são adequadas. Desta forma, podemos facilmente determinar que certos elementos se devem espalhar horizontal e verticalmente por um certo número de caixas. As caixas podem ser de diferentes larguras (colunas) e alturas (filas).

CSS Grid Best Layouts
Layouts no CSS Grid

No exemplo acima, a primeira coluna ocupa mais largura em termos percentuais do que as outras. Isto porque a largura não foi predefinida no CSS e, portanto, é automaticamente orientada para o conteúdo. O mesmo aconteceria se criássemos mais conteúdo do que o predefinido no CSS. Então a grelha aumentaria automaticamente e anexaria o novo conteúdo.

Shopwares Einkaufswelten baseiam-se num sistema semelhante ao CSS Grid - pelo menos na vista do backend. No seu editor WYSIWYG, o conteúdo pode ser exibido numa grelha muito semelhante ao CSS Grid à primeira vista. Na página compilada, no entanto, não é utilizado nenhum CSS Grid, pelo menos por defeito.

CSS Grid Best Layouts
Página inicial de Shopware recriada em Einkaufswelten Designer

Desde 2017, CSS Grid tem sido suportada por quase todos os navegadores comuns. Apenas as versões do Internet Explorer a partir de 10 ainda precisam do prefixo -ms- para poderem exibir CSS Grid quase completamente. A Microsoft Edge, por outro lado, já tem plena integração. Agora nada se opõe à utilização de CSS Grid nos teus projetos futuros:

Defining CSS Grid
Que navegadores suportam CSS Grid

Como é que é CSS Grid na prática?

Como já indicado, utilizamos a função básica de forma semelhante ao Flexbox. Primeiro determinamos um container ao qual atribuímos as funcionalidades de grelha.

.container {
		display: grid;}

Há muitos outros valores que podes atribuir para construir a grelha de acordo com os teus desejos:

grid-template-columns, grid-template-rowsegrid-template-areas (coletivamente, todos eles podem também ser definidos com grid-template). Estas propriedades contêm informação sobre o número e tamanho das filas e colunas. Podes também definir as distâncias entre elas com as propriedades column-gap e row-gap (ou gap).

Também tens a possibilidade - semelhante ao Flexbox - de determinar o posicionamento global dentro da grelha. Para este efeito existem as propriedades: justify-items, align-items (ou: place-items), justify-content, align-content (ou: place-content).

Com a grid-auto-flow podse também determinar em que direção a tua grelha deve fluir com os valores row, column ou dense. Enquanto a linha e a coluna (row e column) tratam do alinhamento horizontal e vertical, respetivamente, dense determina que a tua grelha seja preenchida economicamente. Isto significa que, com este valor, a disposição dos teus elementos dentro da grelha pode mudar em determinadas circunstâncias, a fim de preencher um espaço vazio. Esta é uma característica particularmente interessante para galerias de imagens. Desta forma, os elementos sobem em diferentes tamanhos de ecrã, se necessário, e não são criadas lacunas visuais.

Enquanto defines as colunas e linhas no container, bem como as distâncias entre elas, utilizas os itens da grelha para determinar exatamente onde devem estar localizadas na grelha. 

Uma grelha acabada poderia então ter este aspeto no lado do CSS:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Agora que criaste o teu Grid Container, é altura de o encheres com os itens da grelha. O especial do CSS Grid System é que a disposição no HTML pode ser secundária, porque se pode dar a cada item uma coordenada de início e fim. Isto é feito com grid-column-start, grid-column-end, grid-row-start, grid-row-end .

As coordenadas apontam para as Grid Lines e contam da esquerda para a direita, ou de cima para baixo. Estas também podem ser abreviadas como grid-column e grid-row. 

Os utilizadores e utilizadoras avançadas podem também utilizar a grid-areapara dar a estes campos todas as coordenadas de uma só vez ou atribuir um nome ao teu item de grelha, cuja colocação pode então determinar-se a si próprio no Grid Container. Mas não se pode apenas nomear os itens da grelha. Também é possível atribuir nomes às linhas de grelha para que possas dizer aos itens da grelha as tuas coordenadas utilizando estes nomes. Isto evita que tenhas de contar.

Também é possível a utilização de valores negativos, ou contar da esquerda para a direita, de baixo para cima. Contudo, isto é mais interessante para os/as utilizadores/as avançados/as do CSS Grid. Podes ler em detalhe aqui:

Finalmente, também tens a possibilidade de determinar individualmente o posicionamento do conteúdo dentro dos itens da grelha. Isto é feito com as propriedades: justify-self e align-self (ou:place-self).

Um item de grelha no CSS poderia ter este aspeto:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

O Grid row-end e o grid-column-end também podem ser utilizados com "span +n". Aqui poupas a tediosa contagem de linhas. "Span 2" diz ao item que deve estender-se por dois campos de grelha. Explicações detalhadas sobre as propriedades individuais podem ser encontradas no guia de CSS Tricks.

Exemplos da web

Se és uma pessoa do tipo visual como eu, precisas de ver alguns exemplos práticos para compreender completamente o CSS Grid. Por isso, naveguei um pouco pela internet para encontrar páginas que foram criadas com CSS Grid, ou que poderiam beneficiar da sua utilização.

CSS-Grid-In-Practice
CSS Grid para criação de um portefólio

Levon Biss utilizou CSS Grid como ferramenta de implementação do seu portefólio. Se olhares mais de perto para a sua página com a ferramenta de análise, notarás que a página foi construída com sistemas de grelha aninhada. Em primeiro lugar, a página foi dividida em três secções: Cabeçalho, Principal e Rodapé. A altura para o cabeçalho e o rodapé foi predefinida, enquanto a parte principal com o valor "auto" pode crescer flexivelmente com o conteúdo. As colunas foram colocadas com 1fr para toda a largura disponível.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

A parte principal da sua página foi novamente empacotada num Grid System. Observa como as unidades CSS px e fr foram aqui misturadas. Desta forma, a margem tem uma largura fixa de 144px cada, enquanto que a parte do meio permanece flexível.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Finalmente, a galeria foi também aninhada uma vez mais. Anteriormente, não eram dados valores para as Grid Gaps. Para a galeria, estas foram agora fixadas em 1em. Isto poupa a adição de margem entre as imagens. Assim, podes definir as distâncias uma vez no documento. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Outra característica especial de CSS Grid é a funcionalidade repeat(). Esta é uma forma abreviada de valores repetidos. 

Repeat() toma a quantidade de valores a serem criados como primeiro valor, e o tamanho como segundo valor. Escrito, isto pareceria o seguinte:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
CSS-Grid-In-Practice
Exemplo de site sem CSS Grid

Neste exemplo, não foi utilizado nenhum CSS Grid. Tal como no exemplo anterior, poderíamos ter aninhado a grelha ou acrescentado uma margem ao Grid Container para o espaçamento exterior.

Esta é a aparência que a divisão da grelha poderia ter: 

Esquema da grelha do CSS
Exemplo de site com CSS Grid

Uma possível abordagem ao CSS pode parecer-se com isto:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Esquema da grelha do CSS
Este site também poderia beneficiar de CSS Grid

Embora todo o Larq Website Larq pudesse ter beneficiado do CSS Grid, selecionei apenas uma pequena área para fins ilustrativos. É precisamente aqui que a vantagem de uma grelha bidimensional se torna muito clara.

É com isto que a distribuição dos itens da grelha se poderia parecer:

CSS Grid Grid Items
Grelha CSS numa página de amostra

Uma possível abordagem ao CSS pode parecer-se com isto:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Como podem ser combinados CSS Grid e WordPress?

Com o novo editor WordPress, o conteúdo pode agora também ser exibido em rows e columns por defeito. No entanto, o layout faz-me lembrar mais o Bootstrap e similares e sinto um pouco a falta da bidimensionalidade. É provavelmente o que outras pessoas também terão pensado, e foi por isso que desenvolveram o plugin Grids: Layout builder for WordPress . O plugin é gratuito e faz exatamente o que promete: permite criar visualmente CSS Grids sem a adição de um construtor de páginas.

CSS-Grid-Shopify
O plugin Grids: Layout builder for WordPress em uso

O especial de CSS Grid é a possibilidade de sobreposição sem utilizar margem negativa ou posicionamento absoluto. Isto é exatamente o que é possível com o plugin. Com a ajuda do índice z e também através da disposição na própria grelha (o último elemento está em cima, o primeiro em baixo), as hierarquias podem ser exibidas.

O exemplo acima poderia parecer-se com este como site:

How to use CSS Grid
CSS Grid como exemplo prático

CSS Grid e @media query

CSS Grid pode ser usado livremente com Flexbox e Media Query. No entanto, há outra nova funcionalidade que o CSS Grid traz consigo: minmax()

Como o nome sugere, trata-se aqui de valores mínimos e máximos. Podes utilizá-lo em ligação com as colunas. Ao contrário do Media Query, não é o tamanho do ecrã que é questionado aqui, mas o tamanho do elemento. Se a caixa encolher tanto que fique abaixo do tamanho mínimo, os elementos aumentam e movem-se de modo a encaixarem novamente.

Minmax() funciona em conjunto com o auto-fit e pode ter este aspeto:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Aqui são criadas colunas que têm um tamanho mínimo de 240px, mas um tamanho máximo de 1fr. Neste exemplo, 1fr corresponde a toda a largura da grelha. Isto permite que vários itens da grelha estejam lado a lado se houver espaço, mas usar toda a largura se não houver espaço suficiente.

Mas também há vantagens com Media Query. Com a ajuda das coordenadas, pode colocar e organizar os itens da tua grelha de forma diferente para cada dispositivo. Especialmente em dispositivos móveis, onde uma hierarquia diferente pode prevalecer em relação ao computador de mesa, isto pode proporcionar-te uma experiência de utilizador agradável.

Todas as características especiais num relance

  • FR (fração) como nova unidade CSS
  • Grid Areas e Lines podem receber nomes
  • Grid-column-end, pode ser usado com "span n
  • Declarar as mesmas Columns ou Rows com repeat()
  • Os itens da grelha podem ser dispostos arbitrariamente (também sobrepostos) na grelha

Outras fontes de informação sobre o tema

Tens mais alguma pergunta?

Que perguntas tens sobre CSS Grid? Aguardamos os teus comentários. Interessas-te por design, desenvolvimento e outros temas de WordPress? Então segue a RAIDBOXES no Twitter, Facebook, LinkedIn ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.