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:

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

css#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.