Introduzione alle CSS Grid

Le CSS Grid rappresentano un modo per posizionare elementi contemporaneamente sia in orizzontale che in verticale. È un metodo più avanzato rispetto ai flexbox, ma più complesso da padroneggiare.

Per creare una grid, è necessario impostare la proprietà display al valore grid:

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

#parent {
	display: grid;
}

Dopo questa impostazione, l'elemento si trasformerà in una griglia bidimensionale, in cui gli elementi si posizionano in verticale (colonne) e orizzontale (righe). L'area all'intersezione tra una colonna e una riga è chiamata cella.

Tramite proprietà specifiche si potranno posizionare gli elementi sia per righe, che per colonne. Questo permetterà di realizzare facilmente, ad esempio, cose come questa:

Nelle prossime lezioni studieremo prima il posizionamento degli elementi per colonne, poi passeremo allo studio delle righe, e infine uniremo tutto insieme.