4.1 grid-column xassəsi
CSS Grid Layout grid-də elementlərin yerləşdirilməsini idarə etmək üçün möhkəm alətlər təqdim edir. Əsas alətlərdən biri grid-row və grid-column xassələridir. Bu xassələr proqramçılara grid-elementlərin hansı sətir və sütunları tutacağını dəqiq şəkildə göstərməyə imkan verir, layout üzərində elastiklik və nəzarət təmin edir.
grid-column xassəsi elementin grid-container-də hansı sütunları tutacağını müəyyən edir.
Syntax:
.grid-item {
grid-column: start / end;
}
Burada:
start: grid-in başlanğıc xəttiend: grid-in son xətti
Məsələn 1: Elementin müəyyən bir sütunda yerləşdirilməsi
Bu nümunədə element grid-də ikinci və üçüncü xətlər arasında yerləşəcək və ikinci sütunu tutacaq:
.grid-item {
grid-column: 2 / 3; /* Element grid-in ikinci və üçüncü xətləri arasındakı sahəni tutur */
}
Məsələn 2: Bir neçə sütunu tutan element
Bu nümunədə element birinci xəttdən başlayaraq dördüncü xəttə qədər üç sütunu tutacaq:
.grid-item {
grid-column: 1 / 4; /* Element grid-in birinci xəttindən dördüncü xəttinə qədər sahəni tutur */
}
Məsələn 3: Bir neçə sütunu əhatə etmək üçün span istifadə edilməsi
Bu nümunədə element mövcud mövqedən başlayaraq iki sütunu tutacaq:
.grid-item {
grid-column: span 2; /* Element mövcud mövqedən başlayaraq iki sütunu tutur */
}
4.2 grid-row xüsusiyyəti
grid-row xüsusiyyəti elementin grid-konteynerdə hansı sətirləri tutacağını müəyyən edir.
Sintaksis:
.grid-item {
grid-row: start / end;
}
Burada:
start: şəbəkənin başlanğıc xəttiend: şəbəkənin son xətti
Məsələn 1: Elementin müəyyən bir sətrə yerləşdirilməsi
Bu misalda element şəbəkənin birinci və ikinci xətləri arasında yerləşəcək, birinci sətri tutaraq:
.grid-item {
grid-row: 1 / 2; /* Element şəbəkənin birinci və ikinci xətləri arasında olan sahəni tutur */
}
Məsələn 2: Bir neçə sətir tutan element
Bu misalda element ikinci xətdən başlayaraq dördüncü xəttə qədər olan iki sətri tutacaq:
.grid-item {
grid-row: 2 / 4; /* Element şəbəkənin ikinci və dördüncü xətləri arasında olan sahəni tutur */
}
Məsələn 3: Bir neçə sətri əhatə etmək üçün span istifadə edilməsi
Bu misalda element cari mövqedən başlayaraq üç sətri tutacaq:
.grid-item {
grid-row: span 3; /* Element cari mövqedən başlayaraq üç sətri tutur */
}
Məsələn 4: Mənfi dəyərlərin istifadəsi
.element {
grid-row: 1 / -1; /* Element birinci xətdən başlayır və sonuncu xətdə bitir */
}
4.3 grid-row və grid-column xüsusiyyətlərinin birləşdirilməsi
Daha mürəkkəb layoutlar yaratmaq üçün grid-row və grid-column xüsusiyyətlərini birləşdirərək elementlərin yerləşdirilməsinə dəqiq nəzarət etmək olar.
Nümunə: grid-row və grid-column istifadə edərək mürəkkəb layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* Element birinci və ikinci sətirləri tutur */
grid-column: 1 / 3; /* Element birinci və ikinci sütunları tutur */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Element üçüncü və dördüncü sətirləri tutur */
grid-column: 2 / 5; /* Element ikinci, üçüncü və dördüncü sütunları tutur */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Element birinci sətiri tutur */
grid-column: 3 / 5; /* Element üçüncü və dördüncü sütunları tutur */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
İzah:
.containerkonteynerində dörd sətir və dörd sütun var, hər biri eyni yer tutur.item1elementi birinci iki sətiri və birinci iki sütunu tutur.item2elementi üçüncü və dördüncü sətirləri və ikinci, üçüncü və dördüncü sütunları tutur.item3elementi birinci sətiri və üçüncü və dördüncü sütunları tutur
GO TO FULL VERSION