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
  12. CSS grid ile ögeleri üst üste bindirme
  13. Grid geliştirme araçları

Grid yazılarımızın 14. sünde sizlere CSS Grid ile uyumlu web(responsive) hakkında bir şeyler paylaşacağız. CSS grid modülü çıkana kadar sayfa planlama biz geliştiricilere modül, özellik grubu veya tanım olarak bir çözüm sunmamıştı. Geliştiriciler mevcut şartları sağlayacak özellikleri sayfa planlaması için kullandı.

İlk olarak <table> etiketiyle ve position tanımlarıyla HTML yoğunluklu çözmeye çalıştık. Daha sonra <div> etiketi ve float, width tanımlarıyla CSS yoğun çözümlerle çözmeye çalıştık. Daha sonra flex ile çözmeye çalıştık ancak bunların hiçbiri W3C’nin sayfa planlama için çıkardığı özellikler değildi. Belli bir amaca hizmet ediyordu ve geliştiriciler tarafından sayfa planlama için kullanıldı.

İlk defa sayfa planlama için bir modül olarak grid modülünü biz geliştiricilere sundu. Tüm ihtiyaçları gidermesi zor olsa da birçok gerekliliği karşılıyor. Yeni eklenen subgrid özelliği de sayfa planlamadaki ihtiyaçları karşılamaya yönelik. Ayrıca daha yeni eklenen grid masonry özelliği standart koyucuların ihtiyaçlara göre çözüm üretme eğiliminde olduğunu gösteriyor.

CSS Grid modülü ve özellikleri uyumlu sayfalar üretmek için yeni avantajlar sunuyor. Bu yazımızda bu avatajlardan bahsetmeye çalışacağım.

İki eksen avatanjı

Daha önceleri tek eksenli sayfa kodlamaları yaptığımız için uyumlu web sayfalarındaki bazı yer değiştirmeleri zor oluyordu, bazı tasarımları gerçekleştirme imkanı olmadığı için bazı kod bloklarının iki kopyasını oluşturduğumuz oluyordu. Bu durum grid’in iki eksenli yapısıyla tarihe karıştı.

Zingat’ta ilan detay sayfasında breadcrumb’ın yeri sorun olmuştu. Mobilde resmin altında olan breadcrumb desktopta tüm içerik ve sağ kolonun üzerinde konumlandırılmak istenmişti. Tek eksenli bir düşünce ile bu işi halletmek çok zor bir iş olduğu için biz içeriği iki kere sayfaya ekleyip mobilde birini desktop’ta diğerini göstererek geçmiştik. Şimdi iki eksenli bir grid ile bu işi nasıl yaparım diye düşününce nispeten basit ve tek içerik ile bu durumu çözebiliyoruz.

Nasıl? İyi değil mi?

Tekrar eden alanlarda medya sorgusu olmadan uyumlu hale getirmek

Bir diğer konu, tekrar eden alanlar için kullandığımız repeat işlevi ve bu işlevin dinamik olarak uyumlu alanlar oluşturması. Bu süper bir olay. Tekrarlanan alanlarda uyumluluk konusunda bir kod yazmamıza gerek yok.

repeat() işlevi, auto-fill ve auto-fit değerleri yazımızdaki örnek

auto-fill auto-fit karşılaştırma Ayrıca Juan Martín García’nın Trello-Style Card Layout örneği de incelmeye değer.

Uyumlu web sayfaları oluştururken bize zaman kaybettiren konulardan bir tanesi çok fazla medya sorgusuyla kodumuzun okuma ve yönetiminin zorlaşmasıydı. Grid bu konuda işimizi kolaylaştırıyor.

Grid isimlendirmeyle anlamlı alanlar

Grid kodlarken alanları temelde iki şekilde kodluyoruz. Birinci grid çizgi numaraları, ikincisi grid alanlarını isimleriyle. grid-template-areas tanımı ile isimlendirilen bu alanların nasıl yerleşeceğini görmüştük. Bu flex’teki order’ın çok ötesinde bir kullanım. Çok büyük kolaylık.

Sayfa planlama sihirbazı grid-template-areas yazımızdaki örnekte görüldüğü gibi isimlerle sayfa planı yapabiliyoruz.

codepen örneklerinde masaüstü görünümünü görmek için zoom değerini 0.25x seçiniz.

fr birimiyle esnek alanlar oluşturmak

CSS Grid ile gelen ve sadece grid tanımlarında kullanılan fr birimi bize esnek alanlarımızı oluşturmamızda yardım eder. Yüzde değerleri gibi bulunduğu kapsayıcıya göre değişkenlik gösteren fr tanımlı elemanlar. Bize yüzde değerlerinden daha avantajlı imkanlar sağlar.

fr birimi yazımıza ve örneklerine bakmanızı tavsiye ederiz.

Başta belirttiğim gibi tüm sayfa planlarını karşılıyor demek çok iddialı bir laf olur ama karşılacağımız sayfa planlarının çoğuna çözüm üreten bir yapısı var grid’in.

Kalın sağlıcakla.

Kaynaklar

Chrome'da şifre alanlarının otomatik doldurma sorunu

Chrome'da şifre alanlarının istemsiz olarak otomatik doldurma sorunu Devamını oku

Evden çalışma ve çalışma ortamım

18 August 2020 tarihinde yayınlandı.

Flex'e gap desteği geldi

10 August 2020 tarihinde yayınlandı.