CSS гридларига кириш

CSS гридлари элементларни бир вақтнинг ўзида горизонтал ва вертикал жойлаштиришнинг бир усулидир. Бу флексларга нисбатан анча ривожланган усул, лекин ўзлаштириш учун мураккаброқ.

Грид яратиш учун, элементга display xусусиятига grid қийматини бериш керак:

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

#parent {
	display: grid;
}

Шундан сўнг элемент икки ўлчовли торга айланади, унда элементлар вертикал (устунлар) ва горизонтал (қаторлар) бўйича жойлашади. Устун ва қатор кесишиш joyи катча деб аталади.

Максус xусусиятлар ёрдамида элементларни ҳам қатор, ҳам устун бўйича жойлаштириш мумкин. Бу, masalan, ушбуга ўхшаш нарсаларни осонлик билан яратиш имконини беради:

Кейинги дарсларда биз аввал элементларни устунлар бўйича жойлаштиришни ўрганамиз, сўнгра қаторларни ўрганишга ўтамиз ва oxирида ҳаммасини бирлаштирамиз.