Grid web saytın skelet qruluşunu meydana gətirir. Əsasən Row(sətir) və Column(sütun) adlanan şauquli və üfiqi grid xəttlərindən təşkil edilmişdir.
Elmentləri hizalamaq üçün keçmişdə bir çox üsul vardı. Bu üslullar olduqca çətin idi lakin ilk olaraq Flexbox həyatımıza girdi daha sonra isə Grid. Beləliklə responsiv bir sayt yaratmaq asanlaşdır. Gridin fleboxdan fərqi odur ki , Flexbox ilə elementləri tək ölçülü sıralaya bilirik. Lakin Grid elə Container”dəki children elementleri istədiyimiz hizada düzə bilirik (şauquli və ya üfiqi). Şəkildə grid nümunəsi görürsünüz.
Grid Terminologiyası
Gridi öyrənməzdən əvvəl ilk olaraq onun terminologiyasını bilməliyik.
- Grid Line: Saquli ya da üfüqi xəttlər olaraq da düşünə bilərsiniz.Nömrə ilə adlandırılır
2.Grid container : Row , column , cell kimi elementləri əhatə edən qutu
3 . Grid Row: üfüqi şəkildə düzülmüş element.
4. Grid Cell: Gridin ən balaca ölçü vahaididir.
5. Grid Column: Şauqli şəkildə düzülmüş element.
6. Grid Area: Bir neçə cell dən ibarət yer.
7. Grid Gap : sətir və ya sütun arasındakı boşluq.
Terminologiya bitdiyin görə nümunəyə keçək.
Ilk olaraq Child və parent elementləri olan bir html yaradaq.
🔻 grid-template-columns & grid-template-rows
Daha sonra əsas container”ə display:grid verməklər ilk grid strukturunu yaratdığımızı biz bu html faylına demiş oluruq.
Şəkildəki kimi 2 sətir və 3 sütundan ibarət bir grid layout yaratmaq üçün bizə grid-template-columns & grid-template-rows lazımdır.
Bu css property adları onsuz nə etdiklərini özləri izah edir.
🔻 grid-gap (Gutter — Boşluq)
grid-gap istifadə edərək sətir və sütün arasındakı boşluqları yarada bilərik. bunun üçün sadəcə
grid-gap:20px şəklində yazmaq kifayət edər
Lakin sizin sətir və ya sütünlarınız arasındakı ölçü fərqlidirsə.
grid-row-gap: 20px;
grid-column-gap: 10px;
sizə kömək edəcəkdir.
Repeat()
Grid yaradıldıqdan sonra onunla birlikdə bir neçə funksiyada gəldi. Bunlardan biridə repeat() funksiyasıdır
yuxarıda gördüyünüz kimi 3 sətirli və ya 3 sütünlü bir grid layout yaratdıqda , əgər onların ölçüləridə eynidiirsə dəfələrlə 150px vəya hansısa bir ölçünü dəfələrlə yazmalı oluruq bu da bəzən bugla nəticələnə bilər. bunun üçün.
//grid-template-rows: 150px 150px;
grid-template-rows: repeat(2, 150px);
şəklində yaza bilərik.
fr(fraction)
fr ölçü vahidi ilə pixel hesabı eləmədən rahatlıqla itemlərə ölçü vermək olar.
İlk başda bizim 900px enində boz rəngdə containerimiz vardı. grid-template-columnları aşağıdakı kimi istifadə etsək.
grid-template-columns: 1fr 2fr 3fr;
İtemlərə bu ölçünü vermək olar.
🔻Grid Child Element Positions
Terminologiya hisəsində line’lərın nömrələndiyindən yazmışdım. Şəkildə Görüldüyü kimi 1 nömrəli item’ı sağ alt küncə çəkəciyik.
Ən uzun yoldan ən qısa yola doğru yazacağam.
grid-column-start ve grid-column-end
ilə column Column dəyərlərini fərqli colunmlara çəkək. Məsələn 3 və 3,
yanlızca item-1 clasında css propety olaraq.
grid-column-start:3;
grid-column-end;3
yazsaq yuxarıdakı şəkili alarıq.
grid-column: column-start / column-end
grid-row: row-start / row-end
Başqa bir gözəl yanıda bütün verilən rəqəmləri 1 sətirdə yaza bilirik .
grid-area: row-start / column-start / row-end / column-end
Naming Grid Areas:
Bu bölmədə grid elementlərinə ad verilməsindən danışacıyıq.
yuxarıda verilən şəklin adlandırılması aşağıdakı kimidir.
grid-template-areas: “header header header”
“ aside main main”
“aside item-1 item-2”;
Hər column ve row üçün adları verdikdən sonra bu adları aid olduqları elementlərə veririk
.header{
grid-area: header;
}
Bütün layout kodu aşağıdadır.
max-content, min-content, minmax()
CSS grid ilə gələn başqa bir elementdə : min-content & max-content. dir
max-content: content qədər genişlik ya da hündürlük yaradır.
min-content: Ən geniş söz qədər minimum yer yaradır.
🔻auto-fill, auto-fit
auto-fill: Sətiri sığa bildiyi qədər sütünla doldurur.
auto-fit: Mövcud ərazi qədər elementləri təkrarlayır.
auto-fit istifadə edərək media elementi işlətmədən asanlıqla responsiv bir sayt yaratmaq olar.
Codependən auto-fitin necə işlədiyinə baxa bilərsiz.(Browseri kiçiltərək test etməyi unutmayın.)
Hansı Browserlər dəstəkləyir
🔻 Bundan əlavə kodu özünüz yazmadan web səhifə üzərindən də Grid yarada bilərsiniz. Bunun üçün Grid Layoutit səhifısinə baxın.
Qeyd
Bunlardan əlavə Web proyektlərimə baxmaq üçün Github səhifəmə baxa bilərsiniz.
