Modern CSS Püf Noktaları: Grid, Subgrid ve Container Queries

Modern Web Tasarımında CSS'in Evrimi

Web geliştirme dünyası son yıllarda devrim niteliğinde yeniliklerle, özellikle de CSS tarafındaki güçlü özelliklerle dönüştü. Eskiden karmaşık JavaScript hesaplamaları veya hack'lerle çözdüğümüz yerleşim problemleri, artık tarayıcı düzeyinde kusursuzca çözülebiliyor. Bu yazıda, projelerinizde hemen kullanmaya başlayabileceğiniz Grid, Subgrid ve Container Queries yapılarını derinlemesine inceleyeceğiz.

CSS Grid ile İki Boyutlu Kusursuz Yerleşimler

CSS Grid, sayfa düzenini satır ve sütun bazlı kontrol etmemizi sağlayan en güçlü araçtır. Flexbox tek boyutlu (tek yönlü) senaryolarda harikalar yaratırken, Grid iki boyutlu (yatay ve dikey aynı anda) yapılması gereken karmaşık iskeletler için vazgeçilmezdir.

.dashboard-grid {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

Mimari İpucu: Grid mimarisi kurarken sabit piksel değerleri yerine minmax() ve fr birimlerini tercih etmek, esnekliği artırır.

Subgrid ile İç İçe Bileşenlerde Hizalama

Uzun süre boyunca, iç içe geçmiş Grid yapılarında çocuk elemanların, üst grid'in sütun veya satırlarına göre hizalanması büyük bir baş ağrısıydı. Subgrid tam olarak bu sorunu çözer ve alt elemanların, ebeveynin grid izlerini doğrudan miras almasını sağlar.

.parent-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child-card-wrapper {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
}

Container Queries ile Gerçek Modülerlik

Media Queries (Medya Sorguları) ekran boyutuna göre tasarımları şekillendirmemize izin verir ancak bileşen odaklı modern mimarilerde bu yetersiz kalır. Bir kart bileşeni, ana ekranda geniş bir alanda da yer alabilir, dar bir kenar çubuğunda da. Container Queries, bileşenin kendi kapladığı alanın boyutuna göre stil değiştirmesini sağlar.

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Sonuç

Modern CSS araçları, kod kalitemizi artırırken performans maliyetini sıfıra indiriyor. Grid ile iskeletinizi kurun, Subgrid ile hizalama sorunlarını ortadan kaldırın ve Container Queries ile gerçekten yeniden kullanılabilir (reusable) bileşenler inşa edin. Kodunuzu sade tutun ve tarayıcının gücüne güvenin.