CSS Grid Terminolojisi ve Örnek Kullanımı

CSS’e “flex” ile birlikte gelen yeni özellikler arayüz geliştiricilerin “grid” yapılarını oluşturmasında elini oldukça kolaylaştırdı. Bunun yanı sıra hem margin ve padding ile ince hesaplamalar yapmaktan, hem de clearfix-float ekseninden çıkılmasını da sağlayan oldukça kullanışlı özellikler geldi.

CSS günden güne yeteneklerini artırmakta. “Grid” özelliği de buna dahil. Çok daha kolay ve esnek bir yapı oluşturmamızı sağlayan bu gelişme, temelde “grid-template-rows” ve “grid-template-columns” özelliklerini(property) kullanarak grid yapıları oluşturmamızı sağlıyor.

Bu aşamada örneklendirmelere geçmeden önce karşımıza çıkacak bazı kavramlar üzerinde durmak gerekiyor:

fr: Fractional unit, temelde bir ölçeklendirme birimi. Sizin grid içerisinde tanımladığın bir alanı ifade eder. Bu tanımlama kendi başına yeterli olmayabilir. Şöyle örneklendirelim: fr ölçü birimi tanımlandığı alanı ölçeklendirerek birimlere böler. Eğer 10birimlik bir alan üzerinde işlem yapıyorsak ve sütun(column) bazında 2fr 4fr 4fr gibi bir tanılama sunduysak, bunun bize çıktısı, 20%(2birim) 40%(4 birim) 40%(4 birim) şeklinde olacaktır.

grid: Taşıyıcıya tanımlayacağımız bir özellik. Böylelikle taşıyıcının altındaki elementler “grid” yapısı içerisine girmiş olur.

grid-gap: Taşıyıcı altındaki elementlerin aralarında boşlukları tanımlamamızı sağlar.

grid-template-columns: Grid taşıyıcısı altında element’leri sütun bazında ölçeklendirmeyi sağlar.

grid-template-rows: Grid taşıyıcısı altında element’leri satır bazında ölçeklendirmeyi sağlar.


İlk örneğimizi yaparak işi biraz daha somutlaştıralım.

// Pug View
.container
div 1
div 2
div 3
div 4
// Scss View
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
}

Burada yaptığımız; .container içerisindeki tüm divleri genişliği 200px olacak şekilde sıralandırmak. Burada eğer ki 200px yerine fr üzerinden bir ölçeklendirme yaparsak, fr üzerinden ölçeklendirdiğimiz birim “.container” ın yayıldığı alan boyunca uzayacaktır. Örneğin;

grid-template-columns: 1fr 200px 200px 200px;

gibi bir tanımlama yaptığımızda, 600px’den geriye kalan tüm alan boyunca ilk div elementi uzayacaktır. Burada çeşitli ölçü birimleriye taınlama yapmamız mümkündür. fr, em, rem, px, % gibi gibi… Ya da

grid-template-columns: repeat(4, 200px);

şeklinde bir tanımlama ile 4 adet 200px genişliğinde sütun barındıran bir grid yapısı oluşturabilirsiniz. Buradaki 200px tanılaması tıpkı yukarıda olduğu gibi çeşitli ölçü birimleriyle yapılabilir.


Oluşturduğunuz sütun ve satırların aralarındaki boşlukları belirleyebilmeniz için grid-gap özelliğine değer atamanız gerekmektedir.

grid-gap: #{column-gap} #{row-gap};

İlk değer sütunlar arasındaki ikinci değer ise satırlar arasındaki boşluğu belirler. Örneğin; yukarıdaki örneğimize grid-template-rows ve grid-gap eklediğimizde şöyle bir çıktı elde ederiz;

.container {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 200px 200px 200px 200px;
}

grid-column ilk bakışta biraz karışık gelen bir özellik. Öncelikle bilinmesi gereken en önemli şey, grid’in tanımladığımız sütundan bir adet daha fazla ayraca sahip olması. Firefox’un bize sunduğu önizleme ile bunu farkedebiliriz.

Bu bilgi grid-columns özelliğine tanımlayacağımız değerde işimize yarıyor. Eğer ki grid taşıyıcısının altında div’lerden birine grid-column: #{number} özelliğini verdiğinizde, o div’i bulunduğunuz satırda ve verdiğiniz değer doğrultusunda bir yere yerleştirmiş olursunuz. Peşisıra gelen div’lerde otomatik olarak sıralanırlar. Eğer varolan satırın sonuna ulaşmasını istiyorsanuz belirttiğiniz sütun sayısından bağımsız olarak -1 olarak tanımlamanız yeterlidir.

gird-column: 2 / -1 
// 2.sütundan son sütuna kadar olan alanı kapla
grid-column: 3
// 3.sütundan başla
grid-column: 3 / 5
// 3.sütundan başla ve 4. sütunda bitir
grid-column: span 3
// 3. sütuna kadarki alanı kapla

Biraz karmaşık gibi bir görünüm sunsa da stil yapılandırmanızı grid üzerine kurduğunuzda biraz daha pratik ve temiz işler çıkartabiliyorsunuz. Flex ile birlikte kuvvetli bir seçenek. Özellikle “framework” bağımsız işler çıkarmak gerektiğinde kullanışlı olabiliyor.

Kaynak: 
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
https://www.w3schools.com/css/css_grid.asp