Recipiente de grade no CSS | Explicado

Uma grade CSS é considerada um modelo de layout que particiona uma página da web em várias linhas e colunas para organizar elementos. Essas linhas e colunas ajudam a alinhar os elementos facilmente, em vez de usar propriedades de posição e flutuação. Uma grade posiciona elementos em relação à página da web ou a outros elementos presentes na página da web. Consiste em vários componentes, como recipientes de grade e itens de grade. No entanto, discutiremos o recipiente de grade neste post.

O que é um 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, defina sua propriedade de exibição como grade ou grade embutida.

Você pode fazer um contêiner de grade se comportar de uma certa maneira, utilizando as propriedades CSS associadas a ele. Essas propriedades são discutidas abaixo.

Propriedades do contêiner de grade

As propriedades vinculadas a um recipiente de grade são descritas em detalhes abaixo.

Propriedade de colunas de grade-template

Um recipiente de grade é dividido em várias colunas com tamanhos específicos, 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: Este valor define o valor fornecido como a largura das colunas.

Exemplo
Suponha que você queira fazer quatro colunas cada uma com um comprimento especificado e depois siga o código abaixo.

Html

1
2
3
4
5
6
7
8

Com o objetivo de criar um sistema de grade, criamos um elemento div com os “itens de contêiner” da classe que atuam como um recipiente de grade, enquanto isso, os outros elementos div aninhados dentro dele são itens de grade.

CSS

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

Aqui, criamos quatro colunas, cada uma com a largura especificada no código acima e com um intervalo de 5px cada. Enquanto isso, a div recebeu uma cor marrom arenosa e um preenchimento de 10px.

CSS

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

Agora estamos simplesmente estilizando nossos itens de grade usando propriedades CSS.

Saída

A propriedade está funcionando corretamente.

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: Este valor define o valor dado como a altura das linhas.

Exemplo
Aqui vamos demonstrar como criar linhas com uma certa altura.

Html

.contêiner
Exibição: grade;
colunas de grade-template: automático automático automático;
ROAS DE TEMPLAÇÃO DE GRIDA: 200PX 100PX;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

Aqui estamos criando duas linhas, cada uma com a altura especificada no código acima. Também criamos quatro colunas cada uma com uma largura automática.

Saída

Linhas foram geradas com sucesso.

Propriedade do Content-Content

Para o objetivo de alinhar toda a grade dentro de um contêiner horizontalmente, a propriedade Justify-Content é usada. Lembre -se de que, para que essa propriedade trabalhe, a largura total da grade deve ser menor que a do contêiner.

Sintaxe

Justify-Content: Start | fim | centro | Space-between | espaço-around | Espaço-Mesmo | alongamento | inicial | herdar;

Parâmetros explicados
Iniciar: posiciona a grade no início do contêiner e é o valor padrão.

fim: Isso coloca a grade no último recipiente.

Centro: Isso posiciona a grade no meio do recipiente.

espaço entre: Adiciona uma quantidade igual de espaço entre as colunas.

espaço-around: Adiciona um espaço igual ao redor das colunas.

espaço-mesmo: Isso adiciona um espaço igual ao redor e entre colunas.

esticar: Altera o tamanho dos itens que permitem que a grade cubra toda a largura do contêiner.

Exemplo
Suponha que você queira adicionar espaço entre as colunas dentro de um recipiente de grade.

CSS

.contêiner
Exibição: grade;
Justify-Content: Space Between;
colunas de grade-template: 40px 40px 40px;
gap de grade: 5px;
Background-Color: Sandybrown;
preenchimento: 10px;

No código acima, para tornar a grade menor que o contêiner, estamos fazendo três colunas de 40px cada e para adicionar espaço entre essas colunas, estamos usando o valor entre o valor da propriedade Justify-Content.

Saída

Foi adicionado espaço entre colunas.

propriedade Align-Content

Para alinhar toda a grade dentro de um contêiner verticalmente, a propriedade de conteúdo alinhado é usado. Lembre -se de que, para que esta propriedade trabalhe, a altura total da grade deve ser menor que a do contêiner.

Sintaxe

Alinhado: Iniciar | fim | centro | Space-between | espaço-around | Espaço-Mesmo | alongamento | inicial | herdar;

Parâmetros explicados
começar: Posiciona as linhas no início do contêiner e é o valor padrão.

fim: Isso posiciona as linhas no final do contêiner.

Centro: Isso posiciona a grade no meio do recipiente.

espaço entre: Adiciona uma quantidade igual de espaço entre as linhas.

espaço-around: Adiciona um espaço igual ao redor das linhas.

espaço-mesmo: Isso adiciona um espaço igual ao redor e entre linhas.

esticar: Altera o tamanho dos itens que permitem que a grade cubra toda a altura do contêiner.

Exemplo
Suponha que você queira adicionar espaço entre linhas dentro de um recipiente.

CSS

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

Para adicionar espaço entre linhas, estamos em primeiro lugar, fornecendo alguma altura à grade e, em seguida, usando o valor do espaço entre a propriedade Align-Content, estamos adicionando espaço entre linhas. Além disso, criamos três colunas cada uma com uma largura automática.

Saída

Foi adicionado espaço entre linhas.

Conclusão

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 exibi-lo como grade ou grade embutida. Um contêiner de grade pode atingir certas características através do uso de certas propriedades do CSS associadas a ele, como conteúdo justificado, colunas de plataforma de grade, conteúdo de alinhamento e linhas de grade-templos. Cada uma dessas propriedades foi explicada no artigo, juntamente com exemplos relevantes.