CSS ქსელების შესავალი

CSS ქსელები წარმოადგენს ელემენტების განლაგების გზას ერთდროულად ჰორიზონტალურადაც და ვერტიკალურადაც. ეს უფრო მოწინავე გზაა ფლექსებთან შედარებით, მაგრამ უფრო რთული ათვისებისთვის.

ქსელის შესაქმნელად, საჭიროა ელემენტს მივანიჭოთ თვისება display მნიშვნელობით grid:

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

#parent {
	display: grid;
}

ამის შემდეგ ელემენტი გადაიქცევა ორგანზომილებიან ბადედ, რომელშიც ელემენტები განლაგებულია ვერტიკალურად (სვეტები) და ჰორიზონტალურად (რიგები). ტერიტორია სვეტისა და რიგის გადაკვეთაზე ეწოდება უჯრედი.

სპეციალური თვისებების დახმარებით შესაძლებელი იქნება ელემენტების განლაგება როგორც რიგებით, ასევე სვეტებით. ეს მარტივს გახდის მაგალითად, ასეთი რაღაცების შექმნას:

შემდეგ გაკვეთილებში ჩვენ თავდაპირველად შევისწავლით ელემენტების განლაგებას სვეტებით, შემდეგ გადავალთ რიგების შესწავლაზე, ხოლო ამის შემდეგ ყველაფერს ერთად შევაერთებთ.