CSS Grid-ə Giriş

CSS grid-lər elementləri eyni zamanda üfüqi və şaquli olaraq yerləşdirmək üsuludur. Bu, flex-lərlə müqayisədə daha qabaqcıl bir üsuldur, lakin mənimsəmək üçün daha mürəkkəbdir.

Grid yaratmaq üçün elementə display xassəsini grid dəyərində təyin etmək lazımdır:

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

#parent {
	display: grid;
}

Bundan sonra element ikiölçülü bir şəbəkəyə çevrilir, burada elementlər şaquli (sütunlar) və üfüqi (sətirlər) olaraq yerləşir. Sütun və sətri kəsişdiyi sahə xana adlanır.

Xüsusi xassələr vasitəsilə elementləri həm sətirlər, həm də sütunlar üzrə yerləşdirmək olar. Bu, məsələn, belə şeyləri asanlıqla etməyə imkan verəcək:

Növbəti dərslərdə biz əvvəlcə elementlərin sütunlar üzrə yerləşdirilməsini öyrənəcəyik, sonra sətirlərin öyrənilməsinə keçəcəyik və bundan sonra hamısını birlikdə birləşdirəcəyik.