Assim como o Flexbox, é um sistema de layout, um conjunto de propriedades usadas para gerenciar layouts.

Diferença entre Grid e Flexbox:

• Flexbox: controle do layout em colunas OU linhas.
• Grid: controle do layout em colunas E linhas.

Ele é ótimo para dividir uma página em regiões ou definir o relacionamento em termos de tamanho, posição e camada entre partes de um componente construído de elementos HTML.

É primariamente formado por um Grid Container (elemento pai) com Grid Items (elementos filhos) dentro.

Para criar um Grid Container, basta colocar o valor da propriedade display como grid no elemento:

.container {
	display: grid;
}

Caso o valor colocado for inline-grid, o elemento se comportará como um elemento inline:

.container {
	display: inline-grid;
}

🪟 Grid Tracks

Containers podem definir colunas e linhas (Grid Tracks) usando as propriedades grid-template-columns e grid-template-rows (ou a propriedade shorthand grid-template) . Exemplo:

.container {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

fr significa fração e representa uma porção uniforme do grid, o que é útil quando não se quer calcular porcentagens.

Por exemplo, para grid-template-columns: 1fr 2fr 1fr, o container seria dividido em 6 partes na horizontal. A primeira e a última coluna ficariam com uma largura referente a 1 parte e a coluna do meio ficaria com uma largura referente a 2 partes. Isso seria equivalente a fazer grid-template-columns: 25% 50% 25%.