1.1 Grid Layout-un əsas prinsipləri
CSS Grid Layout — mürəkkəb və adaptiv layoutlar yaratmaq üçün güclü bir alətdir. O, tərtibatçılara elementlərin yerləşdirilməsi üçün ikiölçülü grid sistemi təqdim edir, bu da həm sadə, həm də mürəkkəb layoutların yaradılmasını asanlaşdırır. CSS Grid-in əsas konsepsiyalarını və sintaksisini spesifik xüsusiyyətlərə toxunmadan nəzərdən keçirək.
CSS Grid-in əsas konsepsiyaları
- Grid-container və Grid-elementlər:
- Grid-container — bu,
display: griddaxil edən elementdir. Bu element grid konteyner olur və onun bütün birbaşa övlad elementləri Grid-elementlərə çevrilir. - Grid-elementlər — Grid-container-in birbaşa övlad elementləridir ki, onlar griddə yerləşirlər.
- Grid-container — bu,
- Grid oxları:
- Əsas ox (inline axis) və block ox (block axis): Grid elementlərin yerləşdirilməsi üçün iki oxu dəstəkləyir — əsas ox və block ox. Varsayılan olaraq, əsas ox üfüqi, block ox isə şaquli istiqamətdədir.
- Grid hüceyrələr (Grid Cells):
- Grid hüceyrələr — bunlar sətir və sütunların kəsişməsində yaranan əsas bloklardır. Hər bir Grid-element bir və ya bir neçə hüceyrəni tutur.
- Grid xətləri (Grid Lines):
- Grid xətləri — bunlar sətir və sütunları ayıran üfüqi və şaquli xətlərdir. Elementləri gridə nisbətən yerləşdirmək üçün istifadə edilir.
- Grid sahələri (Grid Areas):
- Grid sahələri — bir neçə hüceyrənin birləşdirilməsi yolu ilə yaradılan adlandırılmış grid sahələridir. Bu, hüceyrələri qruplaşdırmağa və elementləri müəyyən sahələrdə yerləşdirməyə imkan verir.
1.2 Sintaksis elementləri
CSS Grid əsas sintaksis elementləri
1. Grid-container yaratmaq:
.container {
display: grid; /* ya da display: inline-grid */
}
2. Şəbəkənin strukturunu müəyyən etmək:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Müxtəlif genişliklərə malik üç sütun təyin edir */
grid-template-rows: 50px 100px; /* Müxtəlif hündürlüklərə malik iki sıra təyin edir */
}
3. grid-area ilə hüceyrələri birləşdirmək:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Element birinci sıranı və ilk üç sütunu tutur */
}
4. Elementləri avtomatik yerləşdirmək:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Sətirlərin minimal hündürlüyünü təyin edir */
}
1.3 Nümunələr
CSS Grid ilə sadə layout:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Nümunəsi</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
<div class="item">Element 4</div>
<div class="item">Element 5</div>
<div class="item">Element 6</div>
</div>
</body>
</html>
İzah:
- .container konteyneri üç kolon təyin edir: birinci və üçüncü kolonlar mövcud sahənin bərabər hissəsini tutur, ikinci isə iki dəfə çox yer tutur
- Sabit hündürlüklü iki sıra təyin edilir
- gap xassəsi grid hüceyrələrinin arasındakı məsafəni təyin edir
GO TO FULL VERSION