CSS Grid: guia de propriedades de grid container e grid item
7 min7 minutos de leitura
7 min7 minutos de leitura
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.
Autor(a)
Luan Alves
Sou Luan Alves, estudante de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
Para se aprofundar em Front-end, recomendamos a Carreira de Desenvolvimento Front-End React, você segue um caminho organizado de evolução profissional, direto ao ponto. Uma jornada estruturada, com desafios reais, conteúdos práticos e tudo que o mercado espera.
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.
