Menü Kapat

CSS Grid’e Giriş

CSS Grid, web’de iki boyutlu sayfa yerleşimi

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.

CSS Grid'de çizgiler. Üç satır ve üç sütunlu bu örnekte yatay ve dikeyde dörder çizgi yer alıyor.
grid’de çizgiler. Üç satır ve üç sütunlu bu örnekte yatay 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.

CSS Grid'de öğe yerleşiminin değiştirilmesi: 3 numaralı öğe ikinci satır çizgisi ve birinci kolon çizgisinden başlayacak şekilde yerleştiriliyor.
grid’de öğe yerleşiminin değiştirilmesi: 3 numaralı öğe ikinci satır çizgisi ve birinci kolon çizgisinden başlayacak şekilde yerleştiriliyor.

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;
 }
CSS Grid'de öğe yerleşimi ve boyutlandırma: 3 numaralı öğe ikinci yatay çizgiden dördüncü yatay çizgiye, birinci dikey çizgiden üçüncü dikey çizgiye ulaşıyor. İki satır yüksekliğinde ve iki sütün genişliğinde bir öğe.
grid’de öğe yerleşimi ve boyutlandırma: 3 numaralı öğe ikinci yatay çizgiden dördüncü yatay çizgiye, birinci dikey çizgiden üçüncü dikey çizgiye ulaşıyor. İki satır yüksekliğinde ve iki sütün genişliğinde bir öğe.

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.

CSS Grid’le İlgili Kaynaklar

  1. MDN docsdeveloper.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  2. Learn CSS Gridlearncssgrid.com
  3. css-trickscss-tricks.com/snippets/css/complete-guide-grid

Bu yazılar da ilginizi çekebilir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.