Sinan Emre Başaran
CSS Grid, tüm tarayıcılar tarafından desteklemeye başladı. Artık bu yerleşim aracını kullanmak mümkün. Konu ile ilgili bilinmesi gereken şeyleri bir kenara not etmenin zamanıdır.
Kısa bir tanım: CSS Grid Nedir?
CSS Grid, web’de iki boyutlu sayfa yerleşimine imkan veren bir CSS tekniğidir. Bu teknik sayesinde karmaşık web sayfası tasarımlarını, esnek tasarım prensiplerine uygun bir şekilde kodlamak mümkün hale gelmiştir.
En Basit CSS Grid Kullanımı
Grid, alışık olduğumuz CSS’ten biraz daha karışık olduğu için en basitten başlamakta fayda var.
HTML kodu
Örneklerde kullanacağımız HTML kodu:
<div class="grid-ebeveyn"> <div class="cocuk cocuk-1">1</div> <div class="cocuk cocuk-2">2</div> <div class="cocuk cocuk-3 ornek">3</div> <div class="cocuk cocuk-4">4</div> <div class="cocuk cocuk-5">5</div> <div class="cocuk cocuk-6">6</div> <div class="cocuk cocuk-7">7</div> </div>
Basit bir yapı. .grid-ebeveyn öğesi grid’in temelini oluşturacak. Onu alt öğeleri olan .cocuk öğeleri de grid‘in içeriğini oluşturacak.
Bir CSS Grid tanımlamak
Bir grid tanımlamak için ebeveyn öğeye display: grid stilini uyguluyoruz. Böylece bu öğe, oluşturulacak grid‘in ebeveyni (ingilizce kaynaklarda parent, container) haline geliyor. Ebeveynin alt elemanları, çocukları, grid öğeleri (grid item) oluyor.
Alt öğelerin kolayca görülmesi için grid-gap ile bir miktar boşluk da ekliyoruz.
See the Pen Bir grid tanımlama by Emre Başaran (@turzifer) on CodePen.
CSS Grid’de Sütunlar
Sadece display: grid dediğimizde bir grid oluşturmuş oluruz fakat bu, satırlardan (row) oluşan bir yapı olur. İki boyutlu hale getirmek için grid-template-columns ile sütun (column) tanımlaması da yapmak gerekir.
See the Pen grid’de sütunlar by Emre Başaran (@turzifer) on CodePen.
Burada üç sütunlu bir grid tanımladık. Her sütunun genişliği 80px. Aralarında da 8px’lik boşluk var.
CSS Grid’de Satırlar
Satırlara bir değer atamazsak, yukarıdaki örneklerde olduğu gibi, satır yüksekliği o satırdaki içerik tarafından belirlenir.
Satırlara müdahale etmek için grid-template-rows özelliğini kullanıyoruz.
See the Pen grid’de satırlar by Emre Başaran (@turzifer) on CodePen.
Sadece iki satır için yükseklik değeri yazdığımız için, üçüncü satırın yüksekliği içeriğine göre ayarlanıyor.
CSS Grid’de çizgiler
Bir grid‘de satırlar ve sütunlar oluşturmaya başladığımızda otomatik olarak grid çizgileri de oluştururuz. Satırlar ve sütunlar çizgilerin arasında yer alırlar. Bizim örneğimizde üç satır ve üç sütunlu olduğundan yatayda ve dikeyde dörder çizgi yer alıyor.
Grid çizgilerine, bir sonraki örnekte göreceğimiz gibi, numaraları ile işaret edebiliriz.
Konumlandırma: grid-row-start ve grid-column-start
Kullandığımız grid‘de, grid-row-start ve grid-column-start özelliklerini kullanarak örnek öğesinin yerini değiştirebiliriz.
See the Pen grid’de öğelerin yerleşimi by Emre Başaran (@turzifer) on CodePen.
Burada, grid-row-start: 2; ile örnek öğemizi ikinci satıra, grid-column-start : 1; ile de birinci kolona taşıdık. Böylece birinci satır üçüncü sütundaki 3 numaralı öğe, ikinci satır birinci sütuna taşındı.
3 numaralı öğeden sonra gelen öğeler de, ondan kalan yerleri doldurdular. Dikkat ederseniz 4 numaralı öğe, 2 numaralı öğenin yanında bulunuyor.
.ornek {
grid-row-start: 2;
grid-column-start: 1;
}Burada tam olarak şunu söylüyoruz. .ornek öğesi, ikinci satır çizgisinden ve birinci sütun çizgisinden başlasın. Henüz nerede biteceğine dair bir bilgi vermedik.
Boyut belirleme: grid-row-end ve grid-column-end
Bir öğenin yerleşiminin, hangi satır ve sütuna ait çizgilerden başlayacağı gibi, hangi satır ve sütun çizgilerinde biteceğini belirtebiliriz. Böylece, söz konusu öğenin kaç sütun genişliğinde ve kaç satır yüksekliğinde olacağını, yani boyutlarını, belirlemiş oluruz. Bunun için grid-row-end ve grid-column-end özelliklerini kullanıyoruz.
See the Pen grid’de öğelerin boyutlanması by Emre Başaran (@turzifer) on CodePen.
Bu sefer .ornek öğesine, ikinci yatay çizgiden başla ve dördüncü yatay çizgiye kadar devam et. Birinci dikey çizgiden başla ve üçüncü dikey çizgiye kadar devam et demiş oluyoruz. Böylece .ornek, iki satır yüksekliğinde ve iki sütün genişliğinde oluyor.
.ornek {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
}
Sonuç
Buraya kadar bir CSS grid tanımlama, satır ve sütun ölçülerini, alt öğelerin yerleşimlerini ve boyutlarını belirlemeye dair örnekler yaptık. Bunlar konuya bir giriştir ve grid‘in burada değinilmeyen pek çok özellikleri bulunmaktadır. Aşağıdaki listede yer alan kaynaklardan bu konuda ayrıntılı bilgiye ulaşabilirsiniz.