Propriedades da grade CSS | Explicado

CSS Grid é um modelo de layout que permite um arranjo fácil de elementos que aparecem em um site em várias linhas e colunas. Este modelo funciona particionando uma página da web em seções e alinham elementos sem ter que se esforçar pelo trabalho de usar posicionamento e flutuadores. Para usar este modelo, existem inúmeras propriedades CSS disponíveis que explicamos em profundidade neste post.

Propriedades da grade CSS

As propriedades associadas ao módulo de layout da grade são explicadas abaixo.

Propriedade de colunas de grade-template

Como sabemos que um layout de grade consiste em inúmeras colunas que têm um certo tamanho, portanto, para declarar o número de colunas e suas larguras, a propriedade Grid-Template-Columns é usada.

Sintaxe

colunas de grade-template: Nenhum | Auto | Conteúdo máximo | Conteúdo Min | comprimento | inicial | herdar;

Parâmetros explicados
nenhum: É um valor padrão que gera colunas quando necessário.

auto: Este valor avalia a largura das colunas com base no tamanho do contêiner e no tamanho do conteúdo dos itens presentes dentro de uma coluna.

conteúdo máximo: Ele ajusta a largura da coluna com base no maior item da coluna.

Conteúdo min: Ele ajusta a largura da coluna com base no menor item da coluna.

comprimento: Isso define o valor fornecido como a largura das colunas.

Exemplo
Suponha que você queira fazer quatro colunas cada uma com um comprimento especificado no código. Aqui está como você faz isso.

Html

1
2
3
4
5
6
7
8

No código acima, para fazer um recipiente de grade, criamos um elemento div tendo a classe “itens de contêiner” e para colocar certos itens de grade dentro daquele contêiner, aninhamos oito elementos div dentro do recipiente da grade div.

CSS

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

Aqui estamos definindo a exibição do elemento div com a classe "contêiner" para a grade para torná -lo um recipiente de grade. Em seguida, estamos fazendo quatro colunas com as três primeiras colunas com um comprimento de 70px, enquanto que a largura da última coluna é definida como auto. Cada coluna tem uma lacuna de 5px e uma cor de Sandybrown. Por fim, o preenchimento do contêiner é definido como 10px.

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

Quatro colunas com uma certa largura foram criadas.

Propriedade de Relas de Template Grid

Um sistema de grade também consiste em certas linhas, portanto, para especificar o número de linhas junto com sua altura, a propriedade Grid-Template-Rows é usada.

Sintaxe

ROAS DE TEMPOLA DE GRIDA: Nenhuma | Auto | Conteúdo máximo | Conteúdo Min | comprimento | inicial | herdar;

Parâmetros explicados
nenhum: É um valor padrão que gera linhas quando necessário.

auto: Este valor avalia a altura das linhas com base no tamanho do contêiner e no tamanho do conteúdo dos itens presentes dentro de uma linha.

conteúdo máximo: Ajusta a altura da linha com base no maior item da linha.

Conteúdo min: Ele ajusta a altura da linha com base no menor item da linha.

comprimento: Isso define o valor dado como a altura das linhas.

Exemplo
Suponha que você queira criar duas linhas com uma altura especificada e siga o código abaixo.

Html

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

No código acima, geramos duas linhas. A primeira linha tem uma altura de 150px, enquanto isso, a segunda tem uma altura de 250px. Além disso, também criamos quatro colunas, cada uma com uma largura automática com uma lacuna de 5px.

Saída

Duas linhas com uma altura especificada foram criadas.

Propriedade da placa de grade-template

Com o objetivo de especificar o nome das áreas em um sistema de grade, a propriedade Grid-Template-Areas é usada. Funciona de uma maneira que você deve nomear a área usando a propriedade da área de grade e, em seguida, faça referência a esse nome nesta propriedade.

Sintaxe

Mandeira da grade: Nenhuma | nome do item;

Parâmetros explicados
nenhum: É um valor padrão que não especifica nenhum nome para a área de grade.

nome do item: Este valor representa uma sequência de como linhas e colunas em uma grade serão exibidas.

Exemplo
Aqui está como essa propriedade funciona.

CSS

.um
Área da grade: Item;

.contêiner
Exibição: grade;
Mandato-intencional da grade: 'Item Item…';
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

No código acima, usando a propriedade da área da grade, estamos atribuindo o primeiro item da grade um nome "Itema" e depois referenciando esse nome na propriedade Grid-Template-A-A-A-A-OEAS que especifica que o primeiro item tem o nome "ItemA" e ocupará espaço de duas colunas de cinco.

Saída

A propriedade está funcionando corretamente.

Propriedade da placa de grade

É uma propriedade abreviada para as propriedades mencionadas abaixo.

1. colunas de grade-template
2. ROAS DE TEMPLAÇÃO DE GRIDA
3. Grid-template-areas

Sintaxe

Pleda de grade: Nenhum | ROWS-TEMPLATA GRID-TEMPLATE/GRID-TEMPLATE | Splate-areas de grade | inicial | herdar;

Parâmetros explicados
nenhum: É um valor padrão que não especifica nenhum tamanho de linhas e colunas.

colunas de grade-template: Afirma o tamanho das colunas.

ROAS DE TEMPLAÇÃO DE GRIDA: Ele define o tamanho das linhas.

Grid-template-areas: Afirma os nomes das áreas de grade.

Exemplo
Vamos atribuir o número e o tamanho de linhas e colunas de uma só vez.

CSS

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

No código acima, foi especificado que existem duas linhas com a linha 1 com uma altura de 200px e três colunas com uma largura automática para cada coluna.

Saída

A propriedade foi implementada com sucesso…

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
Considere o exemplo abaixo para entender o funcionamento desta propriedade.

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 primeiro especificando três colunas cada uma com largura de 200px e depois afirmando que o terceiro item começará a exibir na linha 1.

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 qual coluna o item começará a aparecer.

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

CSS

.um
Grid-Column-start: 2;

Aqui estamos usando a propriedade da coluna de grade e 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
Consulte o exemplo abaixo.

.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: Ele define em qual coluna o item acabará exibindo.

Exemplo
Aqui estamos fazendo 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 á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: 1/2 / span 3 / span 2;

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 primeira linha, e segunda coluna e abrange 3 linhas e 2 colunas.

Saída

A propriedade foi implementada com sucesso.

Propriedade da Grid-Auto-Columns

Esta propriedade fornece um certo tamanho para as colunas de um layout de grade.

Sintaxe

Grid-Auto-Columns: AUTO | Conteúdo máximo | Conteúdo Min | comprimento;

Parâmetros explicados
auto: Este valor padrão avalia o tamanho das colunas com base no tamanho do contêiner.

conteúdo máximo: Ele ajusta o tamanho da coluna com base no maior item da coluna.

Conteúdo min: Ele ajusta o tamanho da coluna com base no menor item da coluna.

comprimento: Este valor define o valor fornecido como o tamanho das colunas.

Exemplo
Considere o exemplo abaixo.

CSS

.um
Área da grade: 1/1/2/2;

Antes de utilizar esta propriedade, você deve primeiro atribuir locais a cada um de seus itens de grade usando a propriedade da área de grade. Por exemplo, no código acima, especificamos que o item 1 será colocado no início da linha 1 e na coluna 1 e no final da linha 2 e na coluna 2. Agora os locais do restante dos itens são atribuídos em um padrão semelhante.

CSS

.dois
Área da grade: 1/2/2/3;

.três
Área da grade: 1/3/2/4;

.quatro
Área da grade: 2/1/3/2;

.cinco
Área da grade: 2/2/3/3;

.seis
Área da grade: 2/3/3/4;

O restante dos itens da grade também recebe algum local usando a propriedade da área de grade.

CSS

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

Agora, usando a propriedade em discussão, o tamanho das colunas é definido como 200px.

Saída

A propriedade foi implementada.

Propriedade da Grid-Auto-Rows

Esta propriedade fornece um certo tamanho para as fileiras de um layout de grade.

Sintaxe

Grid-Auto-Rows: Auto | Conteúdo máximo | Conteúdo Min | comprimento;

Parâmetros explicados
auto: Este valor padrão avalia o tamanho das linhas com base no tamanho do contêiner.

conteúdo máximo: Ele ajusta o tamanho da linha com base no maior item da linha.

Conteúdo min: Ele ajusta o tamanho da linha com base no menor item da linha.

comprimento: Este valor define o valor fornecido como o tamanho das linhas.

Exemplo
Vamos dar um certo tamanho às linhas no recipiente usando a propriedade em discussão.

CSS

.uma área da grade: 1/1/2/2;
.duas área da grade: 1/2/2/3;
.três área da grade: 1/3/2/4;
.quatro área da grade: 2/1/3/2;
.cinco área da grade: 2/2/3/3;
.seis área da grade: 2/3/3/4;
.contêiner
Exibição: grade;
Grid-Auto-Rows: 200px;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

Assim como a propriedade Grid-Auto-Columns, precisamos primeiro atribuir locais aos itens da grade usando a propriedade da área da grade e depois usar a propriedade Grid-Auto-Rows, o tamanho das linhas foi definido como 200px.

Saída

Cada linha recebeu um tamanho com sucesso.

Propriedade da Grid-Auto-Flow

Esta propriedade lida com a forma como os itens de grade posicionados automaticamente serão colocados dentro do contêiner.

Sintaxe

Grid-Auto-Flow: Linha | coluna | denso | Linha densa | coluna densa;

Parâmetros explicados
linha: Este valor padrão coloca itens preenchendo todas as linhas.

coluna: Este valor coloca itens preenchendo todas as colunas.

denso: Este valor preenche espaços na grade colocando itens nesses espaços.

Linha densa: Coloca itens que preencherem todas as linhas que não deixam orifícios na grade.

coluna densa: Coloca itens preenchendo todas as colunas que não deixam orifícios na grade.

Exemplo
Suponha que você queira colocar seus itens de grade preenchendo cada coluna.

CSS

.contêiner
Exibição: grade;
colunas de grade-template: automático automático automático;
ROAS DE TEMPO DE GRIDA: AUTO AUTO;
Grid-Auto-Flow: coluna;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

No código acima, antes de tudo, criamos quatro colunas cada uma com uma largura automática, depois geramos duas linhas cada uma com altura automática. Posteriormente, estamos usando a propriedade Grid-Auto-Flow para colocar itens preenchendo cada coluna.

Saída

A propriedade está funcionando corretamente.

Propriedade da linha da grade

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

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: Ele define em que linha o item acabará mostrando.

Exemplo
Aqui está um exemplo desta propriedade.

CSS

.dois
Grade-fila: 1 / span 2;

No código acima, declaramos que o item 2 será colocado na linha 1 e abrange 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: Ele define em qual coluna o item acabará 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 de gap-line

Como o nome sugere, a propriedade de gap-gap especifica a lacuna entre linhas de grade.

Sintaxe

ROW-GAP: Comprimento | Normal | inicial | herdar;

Parâmetros explicados
comprimento: Afirma a lacuna entre as linhas.

normal: Ele define uma lacuna normal entre linhas e é um valor padrão.

Exemplo
Consulte o exemplo abaixo para entender esta propriedade.

CSS

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

No código acima, especificamos que a lacuna entre cada linha será de 60px.

CSS

.Itens> div
Background-Color: Bisque;
borda: 1px preto sólido;
preenchimento: 20px 0;
Alinhamento de texto: centro;
Size da fonte: 35px;

Este código é o mesmo que acima, com a única diferença que para demonstrar o conceito de lacuna entre linhas corretamente, adicionamos fronteiras aos itens dentro da grade.

Saída

A lacuna entre linhas foi implementada com sucesso.

Propriedade de Gap de colunas

Esta propriedade declara a lacuna entre as colunas da grade.

Sintaxe

coluna Gap: Comprimento | Normal | inicial | herdar;

Parâmetros explicados
comprimento: Afirma a lacuna entre as colunas.

normal: Ele define uma lacuna normal entre as colunas e é um valor padrão.

Exemplo
Vamos adicionar uma lacuna especificada entre as colunas dentro de uma grade.

CSS

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

Aqui adicionamos uma lacuna de 60px entre cada coluna.

Saída

Foi adicionado lacuna entre colunas.

Propriedade de Gap

Para especificar a lacuna entre linhas e colunas de uma só vez, a propriedade Gap é usada. É uma propriedade abreviada para a seguir.

1. ROW-GAP
2. Gap de coluna

Sintaxe

lacuna: lixo de coluna de gap de linha;

Parâmetros explicados
ROW-GAP: Adiciona uma lacuna entre linhas.

Gap de coluna: Ele adiciona uma lacuna entre as colunas.

Exemplo
Vamos definir alguma lacuna entre linhas e colunas de uma só vez.

CSS

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

No código acima, especificamos que haverá um intervalo de 65px entre cada linha e cada coluna.

Saída

A propriedade está funcionando corretamente.

Conclusão

CSS Grid é um modelo de layout que permite um arranjo fácil de elementos que aparecem em um site em várias linhas e colunas. Existem inúmeras propriedades associadas a ele, como colunas de plataforma de grade, linhas de plataforma de grade, coluna de grade, linha de grade, área de grade, etc. Cada uma dessas propriedades serve a um propósito diferente que explicamos neste post, juntamente com exemplos relevantes.