display: grid nədir ? niyə istifadə olunur?
Salamlar, bugün sizə öyrənməsi çox rahat və çox yerdə istifadə edəcəyiniz bir özəllik olan griddən danışacam. Çalışacam ki sizə gridin istifadəsindən danışmaqla yanaşı həm də gridi harda işlədəcəyinizə aid nümunələr də verim.
Grid funksiyası sizin yazacağınız front-end layihəsində html strkturunuzu rahatlıqla qurmağa kömək edəcək bir üsuldur.
Gəlin sadə bir nümunəyə baxaq, məsələn sizə əlinizdə olan divi (tutaq ki bu divin classı “grid-container”dı) hissələrə bölmək lazmıdı. Siz bu zaman sıra ilə aşağıdakı kodları yazırsınız
HTML
<div class=”grid-container”></div>CSS
.grid-container{display: grid;grid-themplates-columns: 1fr;grid-themplates-row: 1fr;gap: 0px 0px;grid-themplates-areas:“.”;}
Gəlin yuxarıda yazdığımız kodları izah edək. İlk yazdığımız kod olan “display: grid”-dən danışaq bu kod aşağıdakı kodların grid kodları olduğunu bildirən koddur və həmişə sabit olaraq qalır. İkinci və Üçüncü kodlara “grid-themplates-row: 1fr;” “grid-themplates-columns: 1fr;”dan danışası olsaq bu kodların tərcüməsinə də baxanda grid şablonundakı sütunlar və grid şablonundakı sətirlər deyə tərcümə olduqlarını görürük. Yəni biz burda griddəki sütun və sətirlərin sayını müəyyən edəciyik. Hər dəfə yeni sütun və sətir əlavə edəndə isə bunu “grid-themplates-areas:” hissəsini əlavə edəciyik. Burda əlavə edərkən uyğun olaraq sütundursa sütun hissəsindən sətirdirsə sətir hissəsindən yazacıyıq. Məsələn gəlin classı container olan divi 2x2 olamaqla classı container-item adlı uyğun divlərə bölək bölək
HTML
<div class=”grid-container”><div class=”items”>Items</div><div class=”items”>Items</div><div class=”items”>Items</div><div class=”items”>Items</div></div>
CSS
.grid-container {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-template-areas:“.items .items”“.items .items”;width: 200px;height: 200px;border: 1px solid black;}.items{border: 1px solid red;width: 200px;height: 200px;}
Burdan da görüldüyü kimi biz bunu divi 4 bərabər hissəyə çox rahat bir şəkildə bölə bildik. Bəs biz bunu bərabər hissələrə bölmək istəməsək, bunu fərqli ölçüdə hissələrə bölmək istəsək onda necə?
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
Yuxarıdakı gördüyünüz fr dəyərləri ilə oynasaq çox rahatlıqla biz burdakı ölçülər dəyişə bilərik yuxarıya baxsaq görərik ki hər parçaya 1fr qiymet verilib. Biz bunu istədiyimiz əmsallarla bölə bilərik.
İndi isə yuxarıda gördüyümüz gap kodundan danışmaq isətyirəm. Bu kod bizim böldüyüm divlər arasında məsafə qoymağa yarıyan bir xüsusiyyətdir.
gap: 0px 0px;
burda kı dəyərlərdən ilki rowlar arasında ikincisi isə columnlar arasında məsafə qoymaq üçün istifadə olunur.
CSS.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: 1fr;gap: 0px 50px;grid-template-areas:“.items .items .items .items”;width: 200px;height: 200px;}.items{border: 1px solid red;width: 200px;height: 200px;}
İndi isə gəlin gridin biraz qarışıq hissəsi olan div birləşdirmə hissəsinə gələk. Bunu izah etmək üçün 3x3 olan grid yaradıram.
HTML
<body><div class=”grid-container”><div class=”item”>Item1</div><div class=”item”>Item2</div><div class=”item”>Item3</div><div class=”item”>Item4</div><div class=”item”>Item5</div><div class=”item”>Item6</div><div class=”item”>Item7</div><div class=”item”>Item8</div><div class=”item”>Item9</div></div></body>
CSS
.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;gap: 0px 0px;grid-template-areas:“.item .item .item”“.item .item .item”“.item .item .item”;}.item{width: 100%;height: 200px;border: 1px solid red;}
Gəlin burda İtem1lə İtem2ni birləşdirək. İlk olaraq bizim baxmalı olduğumuz məsələ birləşdirmək istədəyimiz divlər bir-biri ilə sətir yoxsa sütun vəziyyətindədir. Şəkildən də görüldüyü kimi İtem1 və İtem 2 eyni sütundadırlar. Onda biz aşağıdakı css kodlarını yazırıq.
.item:nth-child(1){grid-column: 1/span 2;}
Biz bu birləşdirmək istədiyimiz divi yazıb qarşısından nth-child yazırıq burda mörtərizənin içindəki rəqəm bizim birləşdirmək istədiyimiz divin neçənci olduğunu göstərir. Biz bunu HTML-dəki sıraya uyğun seçirik. Onun aşağısında isə biz bu divi sütun yoxsa sətir formasında birləşdirdiyimiz təsdiq edən kod var. grid-column əgər sətir olaraq birləşdirmək istəsək uyğun olaraq grid-row yazırıq. Qarşısında isə ilk olaraq birləşdirmək istədiyimiz div onun qarşından isə bunun hansı divlə birləşəcəyini seçirik. Ancaq bunu birləşdirdikdən sonra brauzerə baxsaq görərik ki bir div boşa çıxıb.
Bu İtem 9 dividir biz bunu HTML hissəsindən sildikdən sonra heç bir problem qalmır.
Son olaraq isə bunu griddə hələdə çətinliyi olanlar bu linkdəki sayta girərək öz themolatelərini yaradıb kodlarını götürüb istifadə edə bilərlər.
Məqaləmizdən bu qədər idi ümid edirəm ki maraqlı və faydalı bir məqalə olmuşdur.
