1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri
  11. CSS Grid kısayolları - grid-template ve grid

CSS ile ögeleri diğer ögelerin üstüne çıkarmak için genelde postion:absolute özelliğini kullanırız. Ancak bu yöntemin şöyle bir sıkıntısı vardır. position: absolute tanımlanmış öge normal akıştan çıktığı için genişliğinin ve yüksekliğinin hesaplanması her zaman problemdir. CSS grid modülü, bu soruna da çözüm oldu.

Plandaki iki ögeye aynı grid hücresinin tanımı yapılıp üst üste binmesi sağlanabilir. Hangi ögenin önde hangi ögenin arkada olması gerektiğini de z-index değeriyle belirleyebiliriz.

Bir örnek verelim.

.oge1 {
    grid-row: 1 / span 4;
    grid-column: 1 / span 4;
    background: lime;
}
.oge2 {
    grid-row: 4 / span 4;
    grid-column: 2 / span 4;
    background: rgba(255, 192, 203, .9);
    z-index: 1;
}
.oge3 {
    grid-row: 7 / span 4;
    grid-column: 7 / span 4;
    background: lightblue;
}
.oge4 {
    grid-row: 4 / span 7;
    grid-column: 3 / span 2;
    background: rgb(255, 255, 0, .7);
}
.oge5 {
    grid-row: 2 / span 3;
    grid-column : 4 / span 5;
    background: rgba(128, 0, 128, .8);
}

Yukarıda görüldüğü üzere kullanılan elemanlara yapılan tanımlarla grid hücrelerini birden fazla öge kullanabiliyor. Bu şekilde üst üste binen alanlar oluşturuluyor. oge2 elemanında yaptığımız gibi z-index tanımıyla istediğimiz ögeyi üste çıkarabiliyoruz. Bu şekilde üste çıkarılan ögeler normal akışta bulunduğu için position: absolute tanımı gibi yükseklik ve genişlik sorunları yaşamıyoruz. Diyeceksiniz ki artık position: absolute tanımına gerek var mı? Hayır. Normal akışın dışına çıkarmak istediğimiz durumlar için ve grid kullanmadığımız durumlar için position: absolute tanımına ihtiyacımız var.

Grid ile birlikte popüler olan magazin tipi sayfalarda genelde gördüğümüz üzerine binme işlerini bu şekilde kolayca halledebiliriz.

Jen SIMMONS‘ın verdiği örnek üzerinden gidelim.

grid üst üste binme

Bir resim ve üzerinde bir başlık ve açıklama alanını kodlayalım.

article {
    display: grid;
    grid-template-columns: 1fr minmax(0, 30ch) 1fr;
    grid-template-rows: 20% 2fr auto auto 1fr;
}

3 kolon 5 satırlık bir plan yapalım.

grid üst üste binme

Resmi (<img>) 1. ve 3. kolon aralığına, 1. ve 6. satır aralığına koyalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
}

Başlığı (<h1>) 2. ve 4. kolon aralığına, 3. ve 4. satır aralığına koyalım. Ayrıca satır ve kolon sonuna hizalayalım.

h1 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
  align-self: end;
}

Son olarak da detay yazısını (<p>) 2. ve 4. kolon arasına, 4. ve 5. satır arasına yerleştirelim. Hizalama olarak da bu hücrelerin başına hizlayalım ki başlık ile alt alta gelsin.

Yukarıda dikkat ederseniz ögeler 2. kolon ve 3. ve 4. satrıları ortak kullanıyorlar. Resmi diğer ögelerin altına almak için z-index: -1 tanımlayalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  z-index: -1;
}

Sonuç aşağıdaki gibi olacaktır.

Absolute‘a göre en büyük avantajı belirttiğimiz gibi içeriğin veya başlığı uzun veya kısa gelmesi duruma göre ayrıca iş yapmamıza gerek yoktur.

Bir başka örnekte daha önce çalıştığım bir projede zamanımı alan bir konuda grid ile çok basit ve kolay çözmek oldu.

İlk bölümde resmin yarısından başlayıp sayfanın en sonuna kadar uzanan ardalan eklemek için biraz zaman harcamıştım. Şimdi grid ile daha az kod ile daha kolay çözdüm.

Kaynaklardaki örnekleri de incelemenizi öneriyorum.

Daha önce CSS ile çözümü olmayan bir konuya grid çözüm sağlayarak bizleri bir kez daha sevindirdi. :)

Yardımlarından dolayı Serkan Bektaş‘a teşekkürlerimi sunarım.

Sağlıcakla kalın.

Kaynaklar

  • https://gedd.ski/post/overlapping-grid-items/
  • https://bricampgomez.com/blog/how-to-overlap-images-in-css/
  • https://www.joomlashack.com/blog/tutorials/layering-items-within-css-grid/
  • https://medium.com/@JonWongCodes/overlapping-and-positioning-using-css-grid-5de7b1f09335
  • https://www.cmuir.co.nz/post/overlapping-elements-with-css-grid/
  • https://twitter.com/wesbos/status/1189603952230371332?s=20
  • https://twitter.com/shshaw/status/1189610604757213185?s=20
  • https://youtu.be/EashgVqboWo
  • https://codepen.io/GD_Design/pen/vPXQem (örnek katman)
  • https://codepen.io/dannievinther/pen/LevJxp (Örnek sayfa)
  • https://cdpn.io/maddesigns/debug/GjKkAd

Chrome 76. sürümü ile birlikte gelen loading="lazy" özniteliği (attribute) tanımı sayesinde gerektiğinde yükleme (lazy loading) için kullandığımız scriptlere gerek kalmıyor artık. Tarayıcı kendi bünyesinde bu işi yapıyor. Tarayıcılar bu kadar derin işlere de girmeli mi mevzusu başka bir tartışmanın konusu.

Genel olarak resimler için kullandığımız bu yöntem aslında iframe ve haricen yüklenen her dosya (js, css vb.) için de geçerlidir. “Kullanıcının görüntü alanı içindeki öğeleri yükleyelim henüz daha görmediği alanlardaki kaynakları boşa yüklemeyelim.” diye düşündüğümüz ve uyguladığımız yöntem artık tarayıcıların bünyesinde geliyor.

Chrome ekibinin performans konusundaki titizliği sonucu hızlıca Blink alt yapısı kullanan tarayıcılara desteğini eklediği bu özellik sayesinde lazy load scriptlerine gerek kalmadan bu özelliği sayfalarımıza kazandırıyor.

Ben kendi sitemde denedim. Öncesinde sayfa yükleme zamnı 2.91 sn iken loading="lazy"özniteliği eklemesi sonrası 1.78 sn düştü sayfa yüklemesi. (Not: Sunucu durumuna göre değişklik gösterebiliyor)

Bu arada ufak bir ipucu olsun markdown (jekyll‘de) kullananlar için kod şöyle

![grid kısayolu](/images/grid.png){: loading="lazy" }

Ben sitemde çok fazla resim kullanmıyorum ancak kod bloku paylaşımı için codepen‘i kullanıyorum. codepen’in iframe’ine loading="lazy"özniteliğini ekleyince daha çok etki etti.

Halihazırda bunun için script kullananlar için destekleyenler için bu olsun desteklemeyenlere script yazsak ne güzel olur derseniz. Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading yazısının içindeki kodu kullanabilirsiniz.

Sonuç olarak şimdiden loading="lazy"özniteliği eklemenin zararı yok ama yararı çok. Türkiye’de toplamda %76,3’lük desteği var şu an. (3 Ocak 2020)

Tarayıcı Desteği

Chrome explorer Firefox
+ - -

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ - -

Kaynaklar

Twitter’da paylaştım ancak twitter’da yazılan zamanla kayboluyor, bundan dolayı buraya yazayım dedim. Herhangi bir kütüphane kullanmadan bu işi yapabiliyor olmak süper.

```js const anlasilirSaat = new Intl.RelativeTimeFormat(‘tr’, { numeric: ‘auto’ });

console.log(anlasilirSaat.format(-1, ‘hour’)); //konsol çıktısı: “1 saat önce” ``