O modelo de layout da grade CSS nos permite criar um layout bidimensional em um site e alinhar os itens da grade em linhas e colunas. Se compararmos o modelo de layout da grade CSS com os modelos de layout anteriores, consequentemente, saberemos que o comportamento de duas direção do modelo de grade CSS mudou completamente a maneira de projetar as interfaces do usuário. O modelo de layout da grade CSS torna possível projetar as páginas da web sem utilizar os carros alegóricos, posicionamento, inblocks, etc.

Neste artigo, abordaremos todos os conceitos básicos do modelo de layout da grade do CSS e será organizado da seguinte maneira:

• O que é modelo de layout de grade CSS?
• Diferença entre grades CSS e CSS Flexbox.
• O que é um recipiente de grade?
• O que são itens de grade?
• Implementação prática do layout da grade CSS.

Então, vamos começar!

O que é modelo de layout de grade CSS

É um modelo de layout baseado em grade bidimensional com linhas e colunas. Essas linhas e colunas podem segurar elementos da grade.

Qual é a diferença entre a grade e o modelo Flexbox

Agora, você deve estar se perguntando ambos?

A tabela abaixo dada o ajudará a entender os fundamentos deste conceito:

Layout da grade CSS	CSS Flexbox
É um modelo de layout bidimensional.	É um modelo de layout unidimensional.
O layout da grade pode funcionar em linhas e colunas simultaneamente.	O Flexbox pode funcionar em linhas ou colunas ao mesmo tempo.
Ajuda a criar layouts mais complicados e organizados.	Ajuda a projetar e criar páginas da Web responsivas.
As grades CSS são mais adequadas para layouts em larga escala.	Os layouts do CSS Flexbox são mais adequados para layouts de menor escala.
Layout Primeira abordagem.	Primeira abordagem de conteúdo.

O que é um recipiente de grade?

Um recipiente de grade é uma caixa/recipiente que contém itens de grade e pode colocar esses itens nas linhas e colunas. Para criar um contêiner de grade, precisamos utilizar a propriedade Display e definir seu valor como grade ou grade embutida.

A tabela abaixo fornecerá um breve guia para as propriedades do contêiner de grade:

Propriedades	Descrição
mostrar	determina um elemento como uma grade especificando seu valor para grade ou grade em linha.
colunas de grade-template e linhas de grade-templos	Determine o tamanho das colunas e linhas dentro de um recipiente de grade, e essas propriedades podem levar uma lista de valores separados por espaço e.g. tamanho da faixa, nome de linha.
Grid-template-areas	Ele determina como mostrar linhas e colunas usando itens de grade nomeados.
Template de grade	É uma propriedade abreviada usada para alcançar as funcionalidades de três propriedades i.e. colunas de plataforma de grade, linhas de plataforma de grade e áreas de grade.
LOW-GAP & COLUNN-GAP	Essas propriedades determinam a lacuna entre as linhas da grade e as colunas da grade, respectivamente.
GRID-coluna Gap e gap-lada da grade	Especifique o tamanho do espaço entre diferentes colunas e linhas da grade, respectivamente.
gap de grade	É uma propriedade abreviada usada para alcançar as funcionalidades de duas propriedades i.e. GRID-coluna Gap e gap-lada da grade
justificar-itens	Alinha os itens da grade ao longo do eixo linhas/embutidas.
alinhado-itens	Alinha os itens da grade ao longo do eixo colunas/embutidos.
itens de lugar	É uma propriedade abreviada para propriedades alinhadas e justificadas-itens que definem essas duas propriedades em uma única declaração.
Justify-Content	Alinha a grade ao longo do eixo linhas/embutidas
Alinhado	Alinha a grade ao longo do eixo de colunas/blocos
conteúdo do local	É uma propriedade abreviada para o conteúdo alinhado e o conteúdo justificado.
colunas de grade-auto	Ele determina o tamanho padrão das colunas…
Grid-Auto-Rows	Ele define o tamanho padrão das linhas.
Grid-Auto-Flow	Determina como os itens de colocação automática são adicionados na grade CSS
grade	Propriedade abreviada para linhas de templos de grade, linhas-auto-arete, colunas de plataforma de grade, colunas de grade-auto-colunas, areas de grade-template e propriedades da grade-flow.

Implementação prática do layout da grade CSS

Agora, vamos implementar algumas propriedades acima descritas praticamente:

Exemplo 1

Em primeiro lugar, implementaremos a propriedade da grade e definiremos seu valor como "grade". Em seguida, utilizaremos a propriedade Grid-Template-Columns e definiremos o valor "Auto" para as três colunas:

Modelo de layout da grade

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

Obteremos a seguinte saída para o snippet de código acima, dado:

Exemplo 2

Agora, vamos implementar a propriedade Grid-Template-Rows, bem, para especificar o tamanho da linha:

ROAS DE TEMPO DE GRIDA: Auto 150px;

O trecho acima mostra que o tamanho da primeira linha é "auto" E o tamanho da segunda linha é “150px”. A saída resultante ficará assim:

Podemos observar o espaço na parte inferior da segunda linha, que valida o funcionamento da propriedade Grid-Template-Rows.

O que são itens de grade?

Os elementos/itens presentes no recipiente de grade CSS são conhecidos como itens de grade ou elementos filhos.

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 para duas propriedades i.e. Grade-Row-Start e Grid-Brend-End.
Á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.

Exemplo 3

Neste exemplo, utilizaremos a propriedade alinhada no “Classe de itens”, Portanto, todo o código será o mesmo especificado nos exemplos anteriores e a única diferença ocorrerá na classe de itens, como mostrado abaixo:

.classe de item
Background-Color: Skyblue;
borda: 2px preto sólido;
preenchimento: 30px;
tamanho da fonte: 30px;
Alinhamento de texto: centro;
Alinhado: Flex-End;

Definimos o valor da propriedade alinhada como Flex-End, que alinhará as linhas no final do contêiner:

É assim que podemos utilizar qualquer recipiente de grade ou propriedades de itens de grade de acordo com nosso cenário.

Conclusão

O modelo de layout da grade CSS nos permite criar um layout bidimensional em um site e alinhar os itens da grade em linhas e colunas. O comportamento bidimensional do modelo de layout da grade nos permite trabalhar em linhas e colunas simultaneamente. O modelo de layout da grade CSS pode ter um elemento pai e vários elementos filhos. O elemento pai é chamado de recipiente de grade e o elemento filho é chamado de item de grade. Numerosas propriedades podem ser usadas para trabalhar com modelos de layout de grade, como exibição, grade, eu, justificar itens etc