Itens de grade no CSS | Explicado

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 participa uma página da web em seções e alinha elementos sem o uso da posição e propriedades flutuantes. Possui dois componentes, um recipiente e itens. No entanto, neste post, enfatizaremos o que é um item de grade e as várias propriedades associadas a ele.

O que é um item 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.

Existem inúmeras propriedades associadas a um item de grade que define suas características. Nós explicamos essas propriedades abaixo.

Propriedades do item da grade

As propriedades vinculadas a um item de grade são explicadas em detalhes abaixo.

Propriedade da grade-fila-partida

Como o nome sugere, esta propriedade declara em que o item da grade começará a exibir.

Sintaxe

Grade-Row-Start: Auto | Linha de linha;

Parâmetros explicados
auto: Este é um valor padrão que coloca itens de acordo com o fluxo da grade.

linha de linha: Afirma em que linha o item começará a mostrar.

Exemplo
Suponha que você queira colocar um item específico na primeira linha do contêiner aqui é como ele é feito.

Html

1
2
3
4
5
6

Para gerar um recipiente de grade, criamos um elemento div ter a classe “itens de contêiner” e para colocar certos itens de grade dentro daquele contêiner, aninhamos seis elementos de div dentro do recipiente da grade, cada um com uma classe diferente.

CSS

.contêiner
Exibição: grade;
colunas de grade-template: 200px 200px 200px;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

.três
Grade-Row-Start: 1;

No código acima, estamos em primeiro lugar atribuindo ao DIV A maior exibição de grade para torná -lo um recipiente de grade, então estamos especificando que existem três colunas na grade, cada uma com uma largura de 200px e tem uma lacuna de 5px. O contêiner também recebeu algumas cores e preenchimento de fundo. Por fim, estamos afirmando que o terceiro item será exibido no início da linha 1.

CSS

.Itens> div
Background-Color: Bisque;
preenchimento: 20px;
Alinhamento de texto: centro;
Size da fonte: 35px;

Agora, usando algumas propriedades básicas do CSS, estamos estilizando nossos itens presentes dentro do contêiner.

Saída

O item 3 foi colocado no início da linha 1.

Propriedade da coluna de grade

Para especificar em qual coluna o item da grade começará.

Sintaxe

Grid-Column-start: Auto | span-n | linha de coluna;

Parâmetros explicados
auto: Este é um valor padrão que coloca itens de acordo com o fluxo da grade.

span-n: Afirma o número de colunas que o item deve abranger.

linha de coluna: Define em que coluna o item começará a mostrar.

Exemplo
Suponha que você queira colocar um item de grade específico em uma coluna específica.

CSS

.contêiner
Exibição: grade;
colunas de grade-template: 200px 200px 200px 200px;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

.um
Grid-Column-start: 2;

No código acima, fizemos quatro colunas cada uma com uma largura de 200 px e, em seguida, usando a propriedade da coluna de grade, estamos colocando o item 1 na coluna 2.

Saída

O item 1 foi colocado com sucesso na coluna 2.

Propriedade da linha de grade

Esta propriedade afirma em que linha o item da grade terminará a exibição, ou o número de linhas de uma grade será.

Sintaxe

End da grade: Auto | span-n | linha de linha;

Parâmetros explicados
auto: Este é um valor padrão que faz com que um item abranja uma única linha apenas.

span-n: Afirma o número de linhas que o item deve abranger.

linha de linha: Ele define em que linha o item terminará exibindo.

Exemplo
Vamos fazer um span de item em 2 linhas.

.contêiner
Exibição: grade;
colunas de grade-template: 200px 200px 200px 200px;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

.um
End da grade: span 2;

No código acima, estamos fazendo o span Item 1 em 2 linhas usando a propriedade de extremidade da linha de grade.

Saída

O item foi abrangente com sucesso em duas linhas.

Propriedade de extremidade da coluna da grade

Esta propriedade afirma em que coluna o item da grade terminará a exibição, ou as colunas numéricas Um item de grade será.

Sintaxe

End da coluna da grade: Auto | span-n | linha de coluna;

Parâmetros explicados
auto: Este é um valor padrão que faz com que um item abranja uma única coluna.

span-n: Afirma o número de colunas que o item deve abranger.

linha de coluna: Define em qual coluna o item terminará exibindo.

Exemplo
Vamos fazer um span de elemento em duas colunas.

CSS

.um
End da coluna da grade: span 2;

O código acima afirma que o item 1 abrange duas colunas.

Saída

O item 1 está abrangendo em duas colunas.

Propriedade da linha da grade

Com o objetivo de definir a localização e o tamanho de um item de grade, a propriedade da linha da grade é usada. Além disso, é uma propriedade abreviada para as propriedades mencionadas abaixo.

1. Grade-Row-Start
2. Grade-rob-lince.

Sintaxe

Grade-loba: grade-loba-partida / grade-line;

Parâmetros explicados
Grade-Row-Start: Afirma em que linha o item começará a mostrar.

Grade-rob-lince: Define em que linha o item terminará mostrando.

Exemplo
Considere o exemplo abaixo.

CSS

.contêiner
Exibição: grade;
colunas de grade-template: automático automático automático;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

.dois
Grade-fila: 1 / span 2;

No código acima, afirmamos que o item 2 será colocado na linha 1 e será abrangente em 2 linhas. Enquanto isso, a grade tem quatro colunas cada uma com uma largura automática.

Saída

A propriedade abreviada foi implementada corretamente.

Propriedade da coluna de grade

Para descrever a posição e a largura de um item de grade, a propriedade da linha da grade é usada. Além disso, é uma propriedade abreviada para as propriedades listadas aqui.

1. Grid-Column-start
2. End da coluna da grade.

Sintaxe

coluna de grade: grade-coluna-start / grade column-end;

Parâmetros explicados
Grid-Column-start: Afirma em que coluna o item começará a mostrar.

End da coluna da grade: Define em qual coluna o item terminará mostrando.

Exemplo
Aqui está um exemplo desta propriedade.

CSS

.um
coluna de grade: 2 / span 2;

O código acima afirma que o item 1 será colocado na coluna 2 e abrangerá 2 colunas.

Saída

A propriedade está funcionando corretamente.

Propriedade da área da rede

Esta propriedade é usada para definir o local e o tamanho de um item de grade ou fornecer um certo nome a um item de grade que é referido pela propriedade Grid-Template-Areas. Além disso, é uma propriedade abreviada para as propriedades mencionadas abaixo.

1. Grade-Row-Start
2. Grade-rob-lince
3. Grid-Column-start
4. End da coluna da grade

Sintaxe

Área da grade: Row-start / colun-start / line-end / colun-end | nome do item;

Parâmetros explicados
Grade-Row-Start: Este valor afirma onde começar a exibir um item em uma linha.

Grid-Column-start: Afirma onde começar a exibir um item em uma coluna.

Grade-rob-lince: Descreve onde parar de mostrar itens seguidos ou quantas linhas para abranger.

End da coluna da grade: Descreve onde parar de mostrar itens em uma coluna ou quantas colunas para abranger.

nome do item: Este valor indica o nome do item da grade.

Exemplo
Para entender o funcionamento desta propriedade, considere o seguinte exemplo.

.contêiner
Exibição: grade;
colunas de grade-template: automático automático automático;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

.Sete
Área da grade: 2/1 / span 2 / span 3;

O código acima afirma que existem quatro colunas cada uma com uma largura automática. Enquanto isso, o sétimo item na grade será colocado na segunda fila, e a primeira coluna e abrange 2 linhas e 3 colunas.

Saída

A propriedade foi implementada com sucesso.

Conclusão

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. Para atribuir características diferentes a um item de grade, existem inúmeras propriedades associadas a ele, como grade-linha, coluna de grade, área de grade, etc. Este guia ensina o que é um item de grade e como você pode fazer com que esses itens se comportem de uma certa maneira usando as propriedades relacionadas, juntamente com exemplos apropriados.