Imagine que você está montando um quebra-cabeça. Você tem todas as peças em mãos, e cada peça representa um elemento da sua página da web. No entanto, você percebe que, ao tentar encaixá-las, algumas não se encaixam corretamente, ficando uma peça por cima da outra, já outras simplesmente desaparecem quando você tenta posicioná-las. Isso é algo com o qual pessoas que desenvolvem páginas na web podem se identificar.
O problema prático e específico é o seguinte: ao criar layouts complexos e responsivos para uma página da web, muitas vezes é desafiador fazer com que todos os elementos se encaixem perfeitamente. Isso não apenas prejudica a estética do site, mas também a usabilidade, o que pode frustrar pessoas usuárias e afastá-las.
As soluções para esse quebra-cabeça digital podem ser várias, entretanto, a mais recomendada para layouts complexos é o CSS Grid. O CSS Grid é como o tabuleiro perfeito para montar esse quebra-cabeça. Ele permite que você defina com precisão onde cada elemento deve estar em um layout, além de oferecer soluções para organizar grupos de elementos de forma responsiva, permitindo que você construa um layout que se adapte perfeitamente a diferentes tamanhos de tela e dispositivos.
E como o CSS Grid funciona?
Basicamente o CSS Grid divide a tela em uma grade de linhas e colunas, oferecendo um conjunto de propriedades para manipular elementos das formas mais variáveis possíveis.
Neste artigo trago para você um guia sobre cada propriedade com exemplos práticos para você consultar sempre que achar necessário:
Propriedades do Grid Container:
1. display: grid
A propriedade display com o valor grid é o ponto de partida para criar um grid container. Ela transforma um elemento HTML em um contêiner de grade, onde você pode organizar os elementos filhos em linhas e colunas.
2. grid-template-columns
A propriedade grid-template-columns é usada para definir o número e o tamanho das colunas em um contêiner de grade CSS.
3. grid-template-rows
A propriedade grid-template-rows funciona de maneira semelhante à grid-template-columns, mas em vez de definir as colunas, você define o número e o tamanho das linhas em um contêiner de grade CSS.
4. grid-template-areas
Essa propriedade permite que você defina áreas nomeadas no grid, facilitando a organização de elementos filhos em regiões específicas do layout.
5. grid-template
Essa é uma propriedade abreviada que combina grid-template-rows, grid-template-columns e grid-template-areas para definir o layout da grade em uma única linha.
6. grid-auto-rows
A propriedade grid-auto-rows é usada para definir o tamanho padrão das linhas que são criadas automaticamente em um contêiner de grade CSS quando não há uma especificação explícita para essas linhas. Isso é útil quando você possui um layout em grade onde algumas colunas ou linhas são explicitamente definidas, mas outras são criadas dinamicamente com base no conteúdo.
7. grid-auto-columns
A propriedade grid-auto-columns é semelhante à grid-auto-rows, mas ela controla o tamanho padrão das colunas criadas automaticamente quando não há uma especificação explícita para essas colunas.
8. grid-auto-flow
Esta propriedade determina como os itens de grade são automaticamente colocados no grid. Você pode definir se eles fluem em linhas ou colunas automaticamente.
9. justify-items
A propriedade justify-items é usada para alinhar horizontalmente os itens (elementos filhos) dentro das células de uma grade (grid). Ela permite definir como os itens se comportam em relação ao eixo horizontal da célula da grade.
10. align-items
A propriedade align-items é usada para alinhar verticalmente os itens (elementos filhos) dentro das células de uma grade (grid). Ela permite definir como os itens se comportam em relação ao eixo vertical da célula da grade.
11. justify-content
A propriedade justify-content é usada para alinhar horizontalmente as células da grade (grid cells) dentro do contêiner da grade (grid container). Ela controla o alinhamento dos grupos de células da grade em relação ao eixo horizontal do contêiner da grade.
12.align-content
A propriedade align-content é usada para alinhar verticalmente os grupos de células da grade (grid cells) dentro do contêiner da grade (grid container). Ela controla o alinhamento dos grupos de células da grade em relação ao eixo vertical do contêiner da grade.
13. gap / row-gap / column-gap
Essas propriedades controlam o espaçamento entre as células do grid, permitindo criar espaçamentos uniformes entre as linhas e colunas.
Propriedades do Grid Item:
1. grid-column
A propriedade grid-column é usada no CSS Grid para controlar a colocação horizontal de um item (elemento filho) dentro de uma célula de grade (grid cell) no layout em grade. Ela permite definir em qual coluna da grade o item deve começar e onde deve terminar.
2. grid-row
A propriedade grid-row é usada no CSS Grid para controlar a colocação vertical de um item (elemento filho) dentro de uma célula de grade (grid cell) no layout em grade. Ela permite definir em qual linha da grade o item deve começar e onde deve terminar.
3. grid-area
Com essa propriedade, você pode atribuir um item de grade a uma área nomeada no grid definida pelo grid-template-areas. Ela também pode ser usada como uma propriedade abreviada, isso significa que ela pode substituir as propriedades grid-row e grid-column, recebendo seus valores.
4. justify-self
A propriedade justify-self é usada para alinhar horizontalmente um item (elemento filho) dentro de sua célula de grade (grid cell). Ela permite que você controle o posicionamento horizontal de um item individual em relação à sua célula da grade.
5. align-self
A propriedade align-self é usada para alinhar verticalmente um item (elemento filho) dentro de sua célula de grade (grid cell). Ela permite que você controle o posicionamento vertical de um item individual em relação à sua célula da grade.
6. place-self
A propriedade place-self é uma propriedade abreviada que recebe os valores que podem ser atribuídos às propriedades justify-self e align-self.
7. order
A propriedade order permite que você controle a ordem de exibição dos itens de grade em relação aos outros itens. Itens com valores menores são exibidos primeiro.
Se interessou em praticar o CSS Grid realizando um projeto para o seu portfólio? Vem realizar a Formação CSS: Aprofunde em estilos na Alura! Nesta formação você vai aprender também outras soluções de layout importantes e muito utilizadas no mercado atualmente além do Grid, como Flexbox, Bootstrap, Sass e muito mais!
Se você deseja continuar a leitura sobre Grid, recomendo o artigo Criando Layouts com CSS Grid Layout, escrito pelo Matheus Castiglioni, onde ele traz o passo a passo da construção de um layout.
Bons estudos! 😀
