Bir önceki yazımızda flexbox’tan ve flexbox’ın elementi site içinde konumlandırmasından bahsetmiştik. Şimdi de bir diğer element konumlandırma metodu Grid’den bahsediyor olacağız.
CSS Grid Layout, yani Grid katman modeli, sayfa içerisinde konumlandırılması gereken elementi web sitesi üzerinde satır ve sütunlar varmış gibi davranarak yerleştirme modeline verilen addır.
Nasıl yani satır ve sütunlar varmış gibi!!!??
Diyelim ki bir yere gideceksiniz. Gideceğiniz bu yere daha önceden hiç gitmediniz ve burayı bilmiyorsunuz. Gitmeden önce buranın adresini öğrenir harita üzerinden bakar yerini kafanızda tasvir eder öyle gidersiniz değil mi? Bu yöntemi düşündüğünüz zaman her şey çok güzel görünüyor. Madem o kadar güzel bir HTML ögesini neden böyle konumlandırmayalım? İşte grid metodunda da bu yol kullanılır. HTML elementine adres verilir, gitmesi gereken yer söylenir ve element o adrese konumlandırılır.
Aşagıda bir site için örnek bir grid yapısı gösterilmiştir.
Peki Gride Nasıl Adres Veririz ki?
Kısaca gridi nasıl uygulayacağımıza bakalım ve gridin çok kullanılan özelliklerine bir göz atalım.
Eğer bir elementi grid yöntemi ile konumlandıracaksak bu elementin kapsayıcısının display özelliğinin değeri grid olarak tanımlanmalıdır.
Bu işlem ile birlikte bu kapsayıcının altındaki bütün child elementler gridin özelliklerini kullanabilmektedirler. Bununla beraber kapsayıcıyının display özelliğine inline-grid değeri de verilebilir.
Grid yöntemi kullanılırken 3 kavramın iyi bilinmesi gerekmektedir:
Kolonlar, satırlar, boşluklar. Bu 3 grid özelliği ile elementlere adres verebiliriz.
column: Kapsayıcıyı kolonlara böldüğümüzü varsayarak her bir kolon için kullanılan terim.
rows: Kapsayıcıyı satırlara böldüğümüzü varsayarak her bir satır için kullanılan terim.
gap: Kapsayıcıyı kolon ve satırlara böldügümüzde ortadaki boşluklar için kullanılan terim.
Elementleri adreslemek için boşlukları, satır ve sütun değerlerini kullanırız.
Aşağıdaki görselde boşluklara (önce kolon boşuluğunun genişliğini vererek sonra da satır boşluğunun genişliğini) değer vererek elementleri konumlandırdık.
Bu iki özellik için daha kısa bir özellik mevcut:
grid-column-gap: 250px;
grid-row-gap: 50px;(sırasıyla önce row değeri sonra column değeri verilir, tek değer girersek hem column hem de row değeri verilen değeri almış olur)
grid-gap: 50px 250px;
Aşağıdaki görselde satır ve sütun değerlerini (önce kolon boşuluğunun genişliğini vererek sonra da satır boşluğunun genişliğini) kullanarak elementleri konumlandırdık.
Pekiiiiii, biz kolon ve satır sayısını nasıl belirleyeceğiz? Bir satırda kaç tane element olacak bir kolon da kaç tane element olacak? Bunları nasıl ayarlayacağız? Bu soruların cevabı da çok basit. grid-template-columns ve grid-template-rows ile satır ve sütunda kaç tane element geleceğini ayarlayabiliriz.
grid-template-columns: auto 500px auto 120px;
grid-template-rows: auto 150px 75px;(Bu iki özelliğin aldığı değerler ile kolon ve satır sayıları belirlenmekte. İlk kod parçacığında 4 değer var. Bu 4 kolon olduğu anlamına gelmektedir. İkinci ve dördüncü kolonun boyutları — 500px, 120px— özellikle verilmiş durumda. Genişliğin geri kalanı da diğer kolon değerlerine auto verilerek eşit bir şekilde dağıtılmaktadır. Aynı işlem satırlar içinde geçerlidir. İkinci kod parçacığı yani grid-template-rows özelliği 3 değer almıştır. Bu 3 satır olacağı anlamına gelmektedir. İkinci 150, üçüncü 75 piksellik değerler ile hesaplandığında geriye kalan değer birinci satır için yükseklik değeri olackatır. Bunu hesaplamak yerine auto değeri verilir.)
Flexbox yazısını daha önce okuduysak orada elementleri konumlandırmak için boşlukları kullandığımızı hatırlayabiliriz Burada da kısaca bahsedelim. Elementleri konumlandırmak için boşluklara değer vererek site içine yerleştirirsek elementler boşluk dışındaki alanlara otomatik olarak konumlandırılmış olurlar. Aşağıda boşlukları konumlandırmak için kullandığımız bir özellik — değer ikilisini örneği mevcut.
justify-content: space-between;
align-content: center;(justify-content özelliği ile elementleri X ekseni üzerinde hizalarken, align-content ile Y ekseni üzerinde hizalarız. Aldıkları değerelere bakacak olursak space-between ile elementler arasında kalan boşluklar yani sütunlar eşit bir şekilde dağıtılırken; center değeri ile elementler kapsayıcısının Y ekseni üzerinde tam hizalanmasını sağlamaktadır.)
Bu iki özelliğin aldığı değerlere kısaca bakacak olursak;
justify-content: space-evenly; (Elementlerin arasındaki boşlukları eşit bölerek konumlandırma)
justify-content: space-around; (Elementin çevresine — X ekseninde yani sağ ve solunda— boşlukları eşit dağıtarak konumlandırma)
justify-content: space-between; (Elementin iç tarafındaki alanına — dış kenarlar hariç — boşlukları eşit dağıtarak konumlandırma)
justify-content: center; (Kapsayıcının X ekseninin merkezinde konumlandırma)
justify-content: start; (Kapsayıcının başlangıç kısmına yaslayarak yani sola yaslayarak eşit bir şekilde konumlandırma)
justify-content: end; (Kapsayıcının bitiş kısmına yaslayarak yani sağa yaslayarak eşit bir şekilde konumlandırma)
justify-content özelliğinin aldığı yukarıdaki değerler aynı şekilde align-content özelliği içinde geçerlidir. justify-content X ekseninde konumlandırma yaparken align-content Y ekseninde aynı değerler ile konumlandırma yapmaktadır.
Boşlukları kullanarak elementleri konumlandırdık. Şimdi de direk elementler ile oynayarak yine onları konumlandırıp onların site içerisinde yerleşimlerini göreceğiz.
Bir elementin site içerisinde genişliğini ve yüksekliğini Grid özelliklerini kullanarak artırmak ve ya azaltmak istersek ve konumlandırmak istersek şu css özellik — değer ikilisi bizi karşılamakta: grid-column-start/grid-column-end, grid-row-start/grid-row-end.
grid-column-start: 1; (1. kolonu referans alarak konumlandırmaya başla.)
grid-column-end: 3; (3. kolonu referans alarak konumlandırmayı bitir, 3. kolon dahil değil.)
grid-row-start: 2; (2. satırı referans alarak konumlandırmaya başla.)
grid-row-end: 3 (3. satırı referans alarak konumlandırmayı bitir, 3. kolon dahil değil.)
Bu özellikler için yine CSS bize kısayol sunmakta;
(sırasıyla önce başlangıç değeri sonra bitiş değeri verilir)
grid-column: 1 / 3
grid-row: 2/ 3
Bir diğer kolaylık olarak da şu söylenebilir;
(başlangıç değerinde sonra alacağı değer aralığı verilebilir)
grid-column: 1 / span 2 (1-3 arasında 2 kutu yer, span 2 olarak nitelendirilir)
grid-row: 2 / span 1 (2–3 arasında 1kutu yer, span 1olarak nitelendirilir)
Bu dört özelliği tek bir CSS özelliği olarak toplasak?
Yine bir CSS kolaylığı bize bu 4 özelliğ tek bir özellik altına toplayama imkanı sunuyor. Bunun için şu özellik ve değerleri yukarıdakileri kapsayacaktır.
Yukarıdaki iki bildirimde aynı sonucu vermektedir.
grid-area: 2 / 1 / 3 / 3;
(Bu kullanımda ilgili adımlar şu şekilde gerçekleşmekte:
grid area’nın ilk değeri row değerinin başlangıç değeri, ikinci değer column değerinin başlangıç değeri, üçüncü değer row değerinin bitiş değeri, son değer ise column değerinin bitiş değeri oluyor.)
Her kutuyu tek tek sıralamak istersek bu şekilde bir CSS yazabiliriz.
Bu CSS konumlandıma yöntemi de Flexbox kadar sıkça kullanılmaktadır. Her iki metod da oldukça işimizi kolaylaştırmaktadır. Hangisini kullancağınız size kalmış. Bu yöntem ile ilgili diğer özellikleri-değerlerini deneyip görmek isterseniz aşağıdaki linki ziyaret ederek pratik yapabilirsiniz.
Bir sonraki yazımızda görüşmek üzere :) 🤟
