6.1 grid-gap Xüsusiyyəti
CSS Grid Layout elementlər arasındakı məkanı idarə etmək üçün çevik alətlər təqdim edir. grid-gap, grid-row-gap və grid-column-gap xüsusiyyətləri sətirlər və sütunlar arasındakı məsafəni asanlıqla təyin etməyə imkan verir və bu da səliqəli və təşkil olunmuş tərtibatlar yaratmağa kömək edir. Gəlin bu xüsusiyyətləri daha ətraflı nəzərdən keçirək.
grid-gap xüsusiyyəti (qısaldılmış gap) şəbəkədəki sətirlər və sütunlar arasındakı ümumi məsafəni müəyyən edir. Bu xüsusiyyət grid-row-gap və grid-column-gap üçün qısaldılmış qeyddir.
Sinaksis:
.grid-container {
grid-gap: value;
}
Burada:
-
value: sətirlər və sütunlar arasındakı məsafənin dəyəri. Müxtəlif ölçü vahidlərində ifadə oluna bilər (px,%,fr,autovə s.)
Nümunə 1: Sətir və sütunlar üçün ümumi dəyər
Bu nümunədə 20px məsafəsi həm sətirlərə, həm də sütunlara tətbiq ediləcək:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Bütün sətir və sütunlar arasında 20px məsafə */
}
Nümunə 2: Sətir və sütunlar üçün fərqli dəyərlər
Bu nümunədə iki dəyər istifadə olunur: birincisi (10px) sətirlər üçün, ikincisi (20px) sütunlar üçün:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* Sətirlər arasında 10px, sütunlar arasında 20px */
}
6.2 grid-row-gap xüsusiyyəti
grid-row-gap xüsusiyyəti grid-də sətirlərin arasındakı məsafəni müəyyən edir. Bu, sətirlərin arasındakı boşluq üçün ayrıca bir dəyər təyin etməyə imkan verir, sütunlardan asılı olmayaraq.
Sintaksis:
.grid-container {
grid-row-gap: value;
}
Harada:
value: sətirlər arasındakı boşluğun dəyəri. Müxtəlif ölçü vahidləri ilə göstərilə bilər. Nümunə 1: Sətirlər arasında sabit məsafənin təyin edilməsi
Bu nümunədə sətirlər arasındakı məsafə 15px olacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Sətirlər arasında 15px boşluq */
}
Nümunə 2: Boşluğun faizlərlə təyin edilməsi
Bu nümunədə sətirlər arasındakı məsafə sətirin hündürlüyünün 5%-i olacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Sətirin hündürlüyündən 5% boşluq */
}
6.3 grid-column-gap xassəsi
grid-column-gap xassəsi şəbəkədəki sütunlar arasındakı məsafəni təyin edir. Bu, sətirlərdən asılı olmayaraq sütunlar arasındakı boşluq üçün fərdi dəyər müəyyən etməyə imkan verir.
Sintaksis:
.grid-container {
grid-column-gap: value;
}
Harada:
value: sütunlar arasındakı boşluğun dəyəri. Müxtəlif ölçü vahidlərində göstərilə bilər
Nümunə 1: Sütunlar arasındakı sabit boşluğun təyini
Bu nümunədə sütunlar arasındakı məsafə 25px olacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Sütunlar arasında 25px boşluq */
}
Nümunə 2: Boşluq üçün em istifadə edilməsi
Bu nümunədə sütunlar arasındakı məsafə 2em olacaq:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Sütunlar arasında 2em boşluq */
}
6.4 grid-row-gap və grid-column-gap xüsusiyyətlərinin birgə istifadəsi
Sətirlərin və sütunların arasındakı boşluqlara daha dəqiq nəzarət etmək üçün grid-row-gap və grid-column-gap xüsusiyyətlərini birgə istifadə edə bilərsiniz.
Tam tətbiq nümunəsi:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Eyni enlikdə üç sütun */
grid-template-rows: repeat(3, 100px); /* Sabit hündürlükdə üç sətir */
grid-row-gap: 15px; /* Sətirlərin arasındakı 15px boşluq */
grid-column-gap: 25px; /* Sütunların arasındakı 25px boşluq */
}
.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>grid-gap, grid-row-gap və grid-column-gap istifadəsinin nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Element 1</div>
<div class="grid-item item2">Element 2</div>
<div class="grid-item item3">Element 3</div>
<div class="grid-item item4">Element 4</div>
<div class="grid-item item5">Element 5</div>
<div class="grid-item item6">Element 6</div>
</div>
</body>
</html>
Kodun izahı:
-
.grid-container: Grid konteyneri yaradır, eyni enlikdə üç sütun və sabit hündürlükdə üç sətir. Sətirlərin və sütunların arasındakı boşluqlar üçüngrid-row-gapvəgrid-column-gapxüsusiyyətlərindən istifadə edir. -
.grid-item: Şəbəkə elementləri üçün əsas stilləri müəyyən edir, məsələn, fon rəngi, mətn rəngi, daxili boşluq, mətnin mərkəzləşdirilməsi və haşiyə.
GO TO FULL VERSION