Uma grade pode ser definida como um conjunto de linhas verticais e horizontais que se cruzam. O layout CSS Grid separa uma página em seções principais. A propriedade Grid oferece um sistema de layout baseado em grade com linhas e colunas. Facilita o design de páginas da web sem posicionamento e flutuação. O layout de grade nos dá uma maneira de criar estruturas de grade representadas em CSS, não em HTML.

Semelhante à tabela, permite ao usuário alinhar os elementos em linhas e colunas. Mas, em comparação com as tabelas, é fácil projetar o layout com a grade CSS. Podemos definir colunas e linhas na grade usando linhas de modelo de grade e colunas de modelo de grade propriedades.

Um contêiner de grade pode ser criado declarando o exibição: grade ou exibição: grade inline em um elemento. O contêiner de grade contém os itens de uma grade que são colocados dentro das linhas e colunas.

Grade x Flexbox

É uma pergunta comum que geralmente surge sobre como a grade é diferente do flexbox. A grade é para layouts bidimensionais (linhas e colunas ao mesmo tempo), enquanto o flexbox é usado para layouts unidimensionais (em uma linha ou coluna). Flexbox é usado quando algo precisa estar em linha reta.

Flexbox é usado para organizar os elementos em uma única coluna ou em uma única linha. Por outro lado, a grade é melhor para organizar os elementos em múltiplas colunas e linhas.

Vamos entender a grade em CSS usando um exemplo.

Exemplo

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Saída