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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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.
