CSS Grid енгізу

CSS Grid бұл элементтерді бір уақытта көлденең және тік орналастыру тәсілі. Бұл флекстермен салыстырғанда аса жетілдірілген әдіс, бірақ меңгеру үшін қиынырақ.

Grid жасау үшін, элементке display сипаттамасын grid мәнінде беру керек:

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

#parent {
	display: grid;
}

Осыдан кейін элемент екі өлшемді торға айналады, онда элементтер тік (бағандар) және көлденең (жолдар) бойынша орналасады. Баған мен жолдың қиылысындағы аймақ жасуша деп аталады.

Арнайы сипаттамалардың көмегімен элементтерді жолдар бойынша да, бағандар бойынша да орналастыруға болады. Бұл мына сияқты нәрселерді оңай жасауға мүмкіндік береді:

Келесі сабақтарда біз алдымен элементтерді бағандар бойынша орналастыруды үйренеміз, содан кейін жолдарды үйренуге көшеміз, ал одан кейін мұның бәрін біріктіреміз.