5.1 grid-auto-rows xüsusiyyəti
CSS Grid Layout, elementləri grid-də avtomatik olaraq yerləşdirmək üçün möhtəşəm alətlər təklif edir. grid-auto-rows, grid-auto-columns və grid-auto-flow xüsusiyyətləri grid-də açıq şəkildə yerləşdirilməyən elementlərin davranışını idarə etməyə kömək edir. Gəlin bu xüsusiyyətləri daha ətraflı nəzərdən keçirək.
grid-auto-rows xüsusiyyəti, açıq şəkildə təyin edilmiş sətirləri aşan elementlər əlavə edildikdə onların hündürlüyünü müəyyən edir.
Sintaksis:
.grid-container {
grid-auto-rows: value;
}
Burada:
-
value: avtomatik əlavə edilən sətirlərin hündürlüyü. Müxtəlif ölçü vahidləri ilə təyin edilə bilər (px,%,fr,autovə s.)
Nümunə 1: Sabit sətir hündürlüyü
Bu nümunədə bütün avtomatik əlavə edilən sətirlərin sabit 100px hündürlüyü olacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Eyni enli üç sütun */
grid-auto-rows: 100px; /* Avtomatik əlavə edilən sətirlər 100px hündürlükdə olacaq */
}
Nümunə 2: Elastik sətir hündürlüyü
Bu nümunədə avtomatik olaraq əlavə edilən sətirlər minimal 100px hündürlüyə sahib olacaq, ancaq lazım olduqda artacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* Sətir hündürlüyünün minimumu 100px, avtomatik olaraq artacaq */
}
5.2 grid-auto-columns xüsusiyyəti
grid-auto-columns xüsusiyyəti, elementlər açıq şəkildə təyin olunmuş sütunlardan kənara çıxdıqda avtomatik əlavə olunan sütunların enini müəyyən edir.
Sintaksis:
.grid-container {
grid-auto-columns: value;
}
Harada:
-
value: avtomatik əlavə olunan sütunların eni. Müxtəlif ölçü vahidləri ilə təyin oluna bilər (px,%,fr,autovə s.)
Misal 1: Fiksasiya edilmiş sütun eni
Bu misalda, bütün avtomatik əlavə olunan sütunlar sabit bir enə - 100px malik olacaq:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* Üç sabit hündürlüklü sətir */
grid-auto-columns: 100px; /* Avtomatik əlavə olunan sütunlar 100px eni olacaq */
}
Misal 2: Elastik sütun eni
Bu misalda, avtomatik əlavə olunan sütunlar ən azı 100px olmaqla başlayır, lakin bir hissə boşluğa qədər artırıla bilər:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* Sütunların ən kiçik eni 100px, bir hissə boşluğa qədər artırıla bilər */
}
5.3 grid-auto-flow xassəsi
grid-auto-flow xassəsi, grid-row və grid-column xassələri ilə açıq şəkildə təyin olunmayan elementlərin şəbəkədə avtomatik olaraq necə yerləşdiriləcəklərini müəyyən edir.
Sintaksis:
.grid-container {
grid-auto-flow: value;
}
Burada:
value: elementlərin yerləşdirilmə sırasını müəyyən edən dəyərdir. Mümkün dəyərlər:
row(standart olaraq): elementlər sətirlərə görə yerləşdirilircolumn: elementlər sütunlara görə yerləşdirilirdense: elementlər sıx yerləşdirilir, boş hüceyrələr buraxılmır (bu,rowvə yacolumnilə birlikdə istifadə olunur)
Nümunə 1: Sətirlərlə yerləşdirmə
Bu nümunədə elementlər bir-bir sətirləri dolduraraq yerləşdiriləcək:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Elementlər sətirlərə görə yerləşdirilir */
}
Nümunə 2: Sütunlarla yerləşdirmə
Bu nümunədə elementlər bir-bir sütunları dolduraraq yerləşdiriləcək:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* Elementlər sütunlara görə yerləşdirilir */
}
Nümunə 3: Sıx yerləşdirmə
Bu nümunədə elementlər sətirlərə görə sıx yerləşdiriləcək, bu isə boş hüceyrələrin sayını minimuma endirir:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Elementlər sətirlərə görə sıx yerləşdirilir */
}
5.4 Tam realizasiya nümunəsi
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Eyni enə malik üç sütun */
grid-auto-rows: 100px; /* Avtomatik əlavə olunan sətrlər 100px yüksəkliyə malik olacaq */
grid-auto-flow: row dense; /* Elementlər sıx dolum ilə sətrlər üzrə yerləşdirilir */
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid-də elementlərin avtomatik yerləşdirilməsi nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
<div class="grid-item">Element 6</div>
</div>
</body>
</html>
Kodun izahı:
-
.grid-container: 3 eyni enli sütundan və100pxhündürlükdə avtomatik sətrlərdən ibarət olan Grid konteyner yaradır. Elementlər sıx dolum ilə sətrlər üzrə yerləşdirilir. -
.grid-item: Şəbəkə elementləri üçün baza üslubları göstərir, məsələn, fon rəngi, mətnin rəngi, boşluqlar, mətnin mərkəzləşdirilməsi və sərhəd
GO TO FULL VERSION