CSS Grid Layout-Bölüm 1
Herkese merhaba! Bu yazımda sizlere web sayfamızdaki elementleri konumlandırmamıza yardımcı olan css display ve position özelliklerinden çok daha fazlasını, çok daha kolay bir şekilde yapmamızı sağlayan css grid aracından bahsedeceğim.
Flexbox’ın tek boyutlu hizalamaya olanak veren yapısının aksine, CSS grid, elementleri iki boyutlu konumlandırmada büyük kolaylık sağlıyor.
Peki, CSS Grid’i kullanmaya nasıl başlarız?
Kapsayıcı elementin display özelliğini grid (block-level grid için) veya inline-grid (inline-level grid için) yaparak bu aracı kullanmaya başlayabiliriz.
Sütun Tanımlama
Display özelliğini grid yapmamızla beraber varsayılan olarak bir sütuna sahip oluyoruz. Daha fazla sütun oluşturmak için kapsayıcı (container) elemente grid-template-columns özelliğini tanımlamamız gerekiyor.
Bu özellik ile birlikte ilki 100px ikincisi 200px olmak üzere 2 sütun tanımlamış oluyoruz.
Satır oluşturma
Satır oluşturmak için ise kapsayıcı elemente grid-template-rows özelliğini tanımlamamız gerekiyor. Yine aynı şekilde sütun tanımlarken yaptığımız gibi değerler atayarak satırımızı oluşturuyoruz.
Bu örnekte ilk satıra %10, ikinci satıra %20, ve üçüncü satıra 600px yükseklik atayarak 3 satır tanımlamış oluyoruz.
Sütun ve satır oluştururken kullandığımız yüzdeler, sütun için kapsayıcı elementin genişliğinin yüzdesi kadar, satır için kapsayıcı elementin yüksekliğinin yüzdesi kadar tanımlanıyor.
Kısayol: Hem sütun için hem de satır için ayrı ayrı grid özellikleri tanımlamak yerine sadece grid-template özelliğini kullanarak aynı sonuca ulaşabiliriz.
Eğik çizgiden önceki değerler satırın boyutunu, sonraki değerler sütunun boyutunu belirliyor. Bu örnekte 2 satır ve 3 sütun tanımlamış olduk.
Fraction
Css grid ile hayatımıza yeni bir birim giriyor: fraction (fr). Sütunun veya satırın boyutunu fr birimini kullanarak kapsayıcı elementin yüksekliğinin veya uzunluğunun oranı olarak alabiliyoruz.
Bu örnekte 3 satır ve 3 sütun tanımladık. Eğik çizgiden önceki değerler satırı temsil ediyordu. Kapsayıcı elementin 400px olan yüksekliğini fr birimini kullanarak 4 parçaya ayırdık. 2fr olan kısım 200px, 1fr olan kısımlar ise 100px uzunluğunda olacaktır.
Aynı şekilde 1fr 3fr 1fr olarak tanımladığımız sütunları 5 parçaya ayırdık. 1fr olan kısımlar kapsayıcı elementin uzunluğu olan 1000px’den birer parça (yani 200px) ve 3 fr olan kısım üç parça (yani 600px) genişliğinde olacaktır.
Repeat() fonksiyonu
Sütun veya satır tanımlarken işimizi kolaylaştırmak için repeat() fonksiyonunu kullanabiliriz.
Bu örnekte 100px genişliğinde 3 sütun oluşturuyoruz. İstersek birden fazla değer de atayabiliyoruz.
minmax() fonksiyonu
Buraya kadar atadığımız her sütun ve satır değeri sabit biçimdeydi. Peki, biz bu değerleri statik olmadan tanımlayabilir miyiz? İşte burada yardımımıza minmax() fonksiyonu koşuyor.
Bu örnekte birinci ve üçüncü sütunlar statik olarak hep 100px kalacaktır. Fakat ikinci sütun, kapsayıcı elementin boyutu değiştikçe en az 100px, en fazla 500px genişliğinde olacak şekilde konumlanacaktır.
Grid Gap
Her bir sütun veya satır arasına boşluk koymak istersek yardımımıza grid gap koşuyor.
Kapsayıcı elemente, sütunlar arasına boşluk koymak için grip-column-gap, satırlar arasına boşluk koymak için grid-row-gap özelliğini ekleyerek kullanabiliriz.
Kısayol: Hem satır hem de sütuna boşluk koymak için ayrı ayrı değer atamak yerine grid-gap özelliğini kullanarak da aynı sonuca ulaşabiliriz. İlk yazacağımız değer satırlar arasına, ikinci yazacağımız değer sütunlar arasına boşluk koyacaktır. Eğer sadece bir değer atarsak o değer kadar hem satıra hem de sütuna boşluk koyacaktır.
Buraya kadar kapsayıcı elemente atayabileceğimiz özellikleri konuştuk. Şimdi ise kapsayıcı içindeki elementlere grid özelliklerini atayarak neler yapabileceğimize bakalım.
Grid-row-start ve Grid-row-end
Bu özellikler ile kapsayıcı içindeki elementlerin hangi satırdan hangi satıra kadar yer kaplayacağını hesaplayabiliriz.
Bu örnekte elementi 1.satır ile 3.satır arasına konumlandırmış oluyoruz, yani element 2 satırı kaplayacak şekilde yerleşecektir.
Kısayol: Bu iki değeri atamak yerine sadece grid-row özelliğini kullanabiliriz. grid-row: 1 / 3; diyerek aynı sonuca ulaşabiliriz.
Grid-column-start ve Grid-column-end
Yukarıda bahsettiğimiz satırlar için geçerli olan özellikler sütunlar için de geçerli. grid-column-start, grid-column-end, ve grid-column özelliklerini kapsayıcı içindeki elementlere tanımlayarak elementlerin hangi sütunlar arasında konumlanacağını belirleyebiliriz.
Grid Area
Grid-row-start ve grid-row-end özelliklerini grid-row olarak, grid-column-start ve grid-column-end özelliklerini grid-column olarak yazabileceğimizden bahsetmiştik. Grid-area ise hem grid-row hem de grid-column özelliklerini beraber kullanmamızı sağlıyor.
Bu örnekte birinci değer grid-row-start, ikinci değer grid-column-start, üçüncü değer grid-row-end, ve dördüncü değer ise grid-column-end değerini alıyor.
Css grid ile ilgili ilk yazımı burada sonlandırıyorum. Okuduğunuz için çok teşekkür ederim. Umarım faydalı olmuştur.
Bu yazıyı codecademy üzerinden css grid çalışırken aldığım notlar ve örnekler üzerinden hazırladım. Bu konu hakkında daha detaylı çalışmak isterseniz codecademy eğitiminin linkini aşağı ekliyorum. Tutorial okumak beni sıkıyor, css grid öğrenmenin daha eğlenceli bir yolu yok mu diyenler için de bir oyun linki ekliyorum :)
