Introdução aos CSS Grids

Os CSS Grids representam uma maneira de posicionar elementos simultaneamente na horizontal e na vertical. É um método mais avançado comparado aos Flexboxes, mas mais complexo de dominar.

Para criar um grid, você precisa definir a propriedade display do elemento com o valor grid:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

Após isso, o elemento se tornará uma grade bidimensional, na qual os elementos são dispostos verticalmente (colunas) e horizontalmente (linhas). A área na interseção de uma coluna e uma linha é chamada de célula.

Usando propriedades específicas, será possível posicionar elementos tanto por linhas quanto por colunas. Isso permitirá criar facilmente, por exemplo, coisas como esta:

Nas próximas lições, primeiro estudaremos o posicionamento de elementos por colunas, depois passaremos ao estudo das linhas, e então combinaremos tudo isso.