O que é Grid CSS?

Atribuir posições apropriadas aos elementos é altamente significativo ao projetar um site. Existem várias propriedades e layouts disponíveis no CSS que ajudam a executar esta tarefa. Um desses layout é o módulo Grid CSS que organiza elementos em linhas e colunas. O foco deste artigo é enfatizar o que é esse layout e como ele pode ser usado.

Vamos começar.

O que é Grid CSS

A grade é um modelo de layout CSS que permite que seus usuários organizem elementos que aparecem em um site em várias linhas e colunas. Esse modelo basicamente divide uma página da web em seções e alinha elementos sem ter que se esforçar pelo trabalho de usar posicionamento e flutuadores.

Uma grade posiciona elementos em relação à página da web ou a outros elementos presentes na página da web. Abaixo, mostramos uma representação visual de um layout de grade CSS.

Um modelo de layout de grade funciona com todos os navegadores mais recentes. Consiste em dois componentes que são Recipiente de grade e itens de grade. Abaixo nós os explicamos em detalhes.

Recipiente de grade

Um recipiente de grade é um elemento pai que mantém itens de grade colocados em linhas e colunas. Com o objetivo de fazer um elemento adotar o comportamento de um recipiente de grade definido sua propriedade de exibição para grade ou grade embutida.

Itens de grade

Um item de grade é um elemento filho que está presente dentro de um recipiente de grade. Dentro de um recipiente por padrão, há um item presente para cada coluna, em cada linha. No entanto, você pode abranger itens de grade em várias linhas e colunas.

Aqui está uma representação gráfica do recipiente de grade e itens de grade.

Como já mencionado, uma grade CSS divide uma página da web em linhas e colunas para organizar elementos. Essas linhas e colunas, juntamente com outras terminologias importantes da grade, são explicadas abaixo.

Colunas em uma grade

As linhas verticais em uma grade na qual os itens são colocados são considerados como colunas em uma grade. Um sistema de grade pode ter pelo menos dois e no máximo doze ou mais colunas.

Linhas em uma grade

As linhas horizontais em uma grade na qual os itens são colocados são considerados linhas em uma grade. Um sistema de grade pode ter inúmeras linhas.

Lacunas em uma grade

A área entre cada linha e a coluna é chamada de lacunas.

Linhas em uma grade

As linhas entre cada linha são chamadas de linhas de linha, enquanto que as linhas entre cada coluna são chamadas de linhas de coluna.

Existem muitas propriedades ligadas à grade CSS. Consulte a próxima seção para aprender sobre eles.

Propriedades da grade

A tabela abaixo fornece uma visão geral das propriedades do layout da grade.

Propriedades	Descrição
colunas de grade-template	Esta propriedade declara o número e o tamanho das colunas em um layout de grade.
ROAS DE TEMPLAÇÃO DE GRIDA	Ele descreve o tamanho das linhas em um sistema de grade.
Grid-template-areas	Esta propriedade atribui nomes a vários itens em uma grade.
colunas de grade-auto	Ele define o tamanho inicial de uma coluna.
Grid-Auto-Rows	Esta propriedade define o tamanho inicial de uma linha.
Grid-Auto-Flow	Ele afirma como os itens que são colocados automaticamente estão posicionados em um sistema de grade.
Grade-Row-Start	Esta propriedade afirma onde começar um item em uma grade.
Grid-Column-start	Ele desempenha a mesma função que a propriedade acima.
Grade-rob-lince
End da coluna da grade	Ele desempenha a mesma função que a propriedade acima.
Área da grade	Esta propriedade é usada para nomear uma área de grade específica.
ROW-GAP	Esta propriedade declara uma lacuna entre linhas.
Gap de coluna	Afirma lacuna entre colunas.

Vamos entender ainda mais o sistema de grade com a ajuda de um exemplo.

Exemplo

No exemplo demonstrado abaixo, criamos um layout de grade simples. O esboço da grade é mostrado abaixo.

Vamos começar a codificação.

Html

A
B
C
D

Aqui, simplesmente aninhamos quatro contêineres de div dentro de um contêiner de div um maior. Cada um dos elementos div recebeu alguma classe.

CSS

.contêiner
Exibição: grade;
gap de grade: 5px;
colunas de grade-template: 120px 120px 120px;

Usando a classe “contêiner” atribuída à divisão maior, estamos exibindo -a como uma grade. Além disso, atribuiu uma lacuna de 5px entre linhas e colunas. Por fim, criamos três colunas com um tamanho de 120px cada uma usando a propriedade Grid-Template-Columns.

CSS

.item
Background-Color: Sandybrown;
cor branca;
Radio de fronteira: 6px;
preenchimento: 25px;
Size da fonte: 20px;

Agora estamos simplesmente estilizando os itens presentes dentro do recipiente de grade usando algumas propriedades básicas do CSS.

CSS

.um
coluna de grade: 1/3; / * Especifica a localização e o tamanho do item dentro de uma coluna */
Grade-fila: 1; / * Especifica a localização e o tamanho do item dentro de uma linha */

A propriedade da coluna de grade define a posição inicial e final do item da grade em uma coluna, enquanto isso, a propriedade da linha da grade define a posição de um item em uma linha. Por exemplo, no trecho de código acima, o item 1 começará a exibir na coluna 1 e terminar na coluna 3, enquanto que será exibido na linha 1.

CSS

.dois
coluna de grade: 3;
Grade-fila: 1/3;

.três
coluna de grade: 1;
Grade-fila: 2;

.quatro
coluna de grade: 2;
Grade-fila: 2;

Usando a coluna da grade e as propriedades da linha da grade, as posições do restante dos itens também estão sendo especificadas.

Saída

Um layout simples de grade foi gerado.

Conclusão

Um modelo de layout da grade permite que seus usuários organizem elementos que aparecem em um site em várias linhas e colunas. Este modelo basicamente divide uma página da web em seções e alinha elementos em relação à página da web ou a outros elementos presentes na página da web. Consiste em vários elementos que são recipientes de grade e itens de grade. Um recipiente de grade é o elemento pai, enquanto itens de grade são elementos infantis. Este artigo discute todos os detalhes necessários do layout da grade junto com representações gráficas e um exemplo apropriado.