CSS Grid alanları

Giriş

• CSS Grid, 2017'den beri tüm büyük tarayıcılarda destekleniyor
• Ancak 2024'te bile hâlâ birçok kişi grid-template-areas özelliğini kullanmıyor
• Bu yazı, grid-template-areas özelliğinin sadeliğini ve gücünü açıklamayı amaçlıyor

CSS adlandırılmış grid alanları

• CSS Grid'de her grid alanına bir ad verilebilir ve CSS genelinde buna başvurulabilir
• Örneğin, iki sütunlu bir grid düzeni tanımlanabilir ve her öğeye grid-area eşlenebilir

Grid template alanı kuralları

• Tanımlanan alanlar dikdörtgen biçiminde olmalıdır
• Tüm alanlar tanımlanmış olmalıdır

Grid template sözdizimi

• Grid alanlarını tanımlamak için grid-template-areas özelliği kullanılmalıdır
• Birden fazla alan dizgesi kullanılabilir
• Tek bir dizge tek boyutlu bir düzen, birden fazla dizge ise çok boyutlu bir düzen anlamına gelir

CSS adlandırılmış grid çizgileri

• Grid çizgilerine benzersiz adlar verilebilir
• Örneğin, 3 sütunlu bir gridde her çizgiye ad verilebilir
• Adlandırılmış grid çizgileri, varsayılan çizgi numaralarının yerine geçmez

Grid template alanlarının kullanım örnekleri

• Grid yönünü tersine çevirme: grid-template-areas kullanılarak düzen yönü kolayca değiştirilebilir
• Header düzeni: grid-template-areas kullanılarak header düzeni tanımlanabilir ve responsive hale getirilebilir
• Editorial düzen: çeşitli içerik türlerini içeren bir düzen kolayca tanımlanabilir ve değiştirilebilir

Koşullu düzen ve CSS :has()

• CSS :has() seçicisi kullanılarak, bir öğenin var olup olmamasına göre düzen değiştirilebilir

Çok dilli destek (LTR/RTL)

• CSS Grid, sayfa yönüne (LTR veya RTL) göre düzeni ayarlar
• Bu, adlandırılmış grid alanlarının da sayfa yönünü izlediği anlamına gelir

Grid alanları ve DevTools

• Tüm büyük tarayıcılar grid alanları için iyi araçlar sunar (Chrome, Safari, Firefox)
• Her tarayıcının grid alanlarını görselleştirme yöntemi farklıdır

GN⁺ özeti

• CSS Grid'in grid-template-areas özelliği, düzeni görsel olarak anlamak ve yönetmek için kullanışlıdır
• Özellikle ekip üyelerinin düzeni değiştirmesi gerektiğinde faydalıdır
• Bu yazı, grid-template-areas özelliğinin sadeliğini ve gücünü açıklayarak daha fazla kişinin bu özelliği kullanmasını teşvik etmeyi amaçlıyor
• Benzer işlevler sunan diğer projeler arasında Flexbox da bulunur

[GN⁺]

Hacker News yorumları

• Animasyon demosu ilgisini çekti, ancak bunun CSS ile yapılmadığını fark etti

  • Flexbox öğrenip memnun kalmıştı ve Grid öğrenme gereği duymamıştı
  • Grid'i tercih etmek için nedenler var, ama pratikte ihtiyaç hissetmemişti
  • Veri tabloları için gerçek tablolar kullanıyor

• Bu yazı, Grid'in avantajlarını ve CSS sözdiziminin hantallığını vurguluyor

  • İki boyut ve üç parametre var (başlangıç, bitiş, boyut)
  • Her parametreyi tanımlamanın en az üç yolu var
  • Kısaltma özellikleri nedeniyle okunması zor
  • Başka geliştiricilerin Grid tanımlarını okumak zor

• 1/3, bir kesir değil, 1'den 3'e kadar olan bir aralık

  • Neden böyle bir sözdizimi seçildiğini anlayamıyor
  • Programlamada aralık belirtmek için daha iyi sözdizimleri var (ör. 1..3)

• Grid Garden ve Flexbox Froggy hakkında

  • Grid Garden
  • Flexbox Froggy

• Grid ya da Flexbox'ı anlayamamıştı

  • En son iyi kullandığı yerleşim stratejisi floatlardı
  • Bu yazı, bir sonraki yerleşim tasarımında CSS Grid kullanma güveni verdi
  • İyi hazırlanmış yazı için teşekkür ediyor

• Bu belgenin başlangıç seviyesine uygun bir sürümü olup olmadığını merak ediyor

  • Giriş bölümünde kaybolmuştu
  • "line number"ın ne olduğunu anlayamamıştı
  • 1/3 ve 1/4 gibi kesirlerde takılıp kalmıştı

• Jen Simmons'ın Mondrian with auto flow çalışmasını güçlü biçimde tavsiye ediyor

  • Jen Simmons Mondrian
  • Pencere boyutunu değiştirince çok etkileyici görünüyor
  • Auto flow'un boşlukları nasıl algılayıp doldurduğunu anlamak istiyor

• Sözdiziminin neden 1/2 ve 3/4 olarak tanımlandığını merak ediyor

  • 1-2 veya 1->2 gibi bir sözdizimi daha anlaşılır olurdu diye düşünüyor

• İnteraktif blog yazılarını seviyor

  • Grid alanlarını araç üzerinde denemenizi öneriyor
  • Grid Layoutit'i yıllardır kullanıyor ve boşluk ayarlamak çok daha kolay hale gelmiş

• CSS Grid'i ilk kez gerçekten anlamış gibi hissediyor

  • Numaralandırma çok yardımcı olmuş
  • Harika bir yazı; sık sık başvuracağını söylüyor