O CSS fornece um modelo de layout de grade que nos ajuda a dividir uma página em várias regiões e nos permite alinhar os elementos em linhas e colunas dinamicamente. Este modelo tem dois componentes primários, eu.e. Recipiente de grade e itens de grade. Especificamente, se falarmos sobre os itens da grade, existem muitas propriedades disponíveis que podem servir a vários propósitos.

Este artigo apresentará uma visão geral completa das propriedades do item da grade CSS e será organizada da seguinte maneira:

• O que são itens de grade?
• Propriedades dos itens de grade em CSS
• Sintaxe das propriedades de itens de grade CSS
• Como usar propriedades de itens de grade

Então, vamos começar!

O que são itens de grade?

Os itens dentro do recipiente de grade CSS são conhecidos como itens de grade ou elementos filhos.

Propriedades dos itens de grade em CSS

CSS fornece inúmeras propriedades para trabalhar com itens de grade CSS. A tabela fornecida abaixo ilustra diferentes propriedades dos itens da grade:

Propriedades	Descrição
Grid-Column-start e grade-fila-start	Essas propriedades determinam a localização dos itens da grade, especificando onde iniciar o item.
End da coluna da grade e grade-fila	Essas propriedades determinam a localização dos itens da grade, especificando onde encerrar o item da grade.
coluna de grade	É uma propriedade abreviada para as propriedades da coluna de grade e propriedades da coluna de grade.
Grade-fila	É uma propriedade abreviada que é usada para alcançar as funcionalidades da grade-campista e da grade-brea.
Área da grade	Ele especifica o nome do item da grade, ou pode ser usado para alcançar as funcionalidades de múltiplas propriedades i.e. Grade-Row-iniciante, coluna de grade, grade-robeira e extremidade da coluna de grade.
justificar-se	Alinha um item de grade dentro de uma célula ao longo do eixo em linha/em linha.
alinhado	Alinha um item de grade dentro de uma célula ao longo do eixo da coluna/bloco.
Local-eu	É uma propriedade abreviada para duas propriedades i.e. Alinhado e justificar-se-eu.

Sintaxe

O trecho dado abaixo o ajudará a entender a sintaxe básica das propriedades do item da grade:

nome de propriedade: valor (s);

O nome da propriedade será seguido pelo cólon “:” e, em seguida, os valores serão especificados do outro lado do cólon e esses valores decidirão qual funcionalidade será realizada pelo item da grade.

Como usar propriedades de itens de grade

A partir de agora, temos um entendimento básico das propriedades dos itens da grade, agora vamos dar um passo adiante e implementar as propriedades acima descritas praticamente.

Exemplo

Vamos supor que temos duas linhas e quatro colunas, e temos um total de seis itens de grade. Agora, especificaremos os quatro primeiros elementos na primeira linha e os dois últimos elementos na segunda linha:

Modelo de layout da grade

Primeiro item
Segundo item
Terceiro item
Quarto item
Quinto item
Sexto item

A partir do trecho acima, podemos observar que, na etiqueta corporal, temos um elemento pai e seis elementos filhos. Na etiqueta da cabeça, especificamos o estilo para elementos de pai e filho. Além disso, como queremos implementar algum estilo específico no Item-Class5 e Item-Class6, por isso o denominamos separadamente:

A saída verifica o funcionamento da coluna de grade e as propriedades da linha da grade.

Da mesma forma, podemos utilizar as propriedades restantes do item da grade, dependendo de nossas necessidades.

Conclusão

Os itens dentro do recipiente de grade CSS são conhecidos como itens de grade ou elementos filhos. O CSS fornece inúmeras propriedades para trabalhar com itens de grade CSS, como a coluna de grade, a grade-row-start especifica o local de início do item, as propriedades de si mesmo justificar-se e alinhadas alinham um item de grade dentro de uma célula ao longo da linha/eixo embutido , eixo de coluna/bloco, respectivamente. Da mesma forma, existem muito mais propriedades de itens de grade CSS que podem ser usados ​​para servir várias funcionalidades.