Introducere în CSS Grid

CSS Grid-urile reprezintă o modalitate de a plasa elementele simultan atât pe orizontală, cât și pe verticală. Este o metodă mai avansată în comparație cu flexbox, dar mai complexă de stăpânit.

Pentru a crea un grid, trebuie să setați proprietatea display la valoarea grid:

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

#parent {
	display: grid;
}

După aceasta, elementul se va transforma într-o rețea bidimensională, în care elementele sunt dispuse pe verticală (coloane) și orizontală (rânduri). Zona de intersecție a unei coloane și a unui rând se numește celulă.

Cu ajutorul unor proprietăți speciale, puteți plasa elementele atât pe rânduri, cât și pe coloane. Acest lucru vă va permite să creați cu ușurință, de exemplu, astfel de lucruri:

În lecțiile următoare, vom studia mai întâi plasarea elementelor pe coloane, apoi vom trece la studiul rândurilor, iar după aceea vom combina toate acestea împreună.