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

Modern CSS ile Arayüz Mimarisi

Web geliştirme dünyası son birkaç yılda devrim niteliğinde CSS özelliklerine kavuştu. Artık sadece ekran boyutuna (Media Queries) bağımlı kalmadan, bileşenlerin kendi bağlamlarına göre şekillendiği modern bir döneme girdik. Bu yazıda, üretim ortamında (production) sıkça kullandığımız CSS Grid, Subgrid ve Container Queries yapılarını derinlemesine inceleyeceğiz.

1. CSS Grid ile Güçlü Yerleşimler

Geleneksel float veya flexbox yapılarının karmaşık ızgara sistemlerinde yetersiz kaldığı noktada CSS Grid devreye girer. İki boyutlu (satır ve sütun) yerleşimleri kusursuz yönetmenizi sağlar.

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

2. Subgrid ile Hizalama Kusursuzluğu

Grid içinde alt elemanların ana grid satır veya sütunlarını miras alamaması uzun süre büyük bir problemdi. subgrid değeri bu sorunu kökten çözüyor ve özellikle kart tasarımlarında kusursuz bir dikey hizalama sunuyor.

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

3. Container Queries ile Bileşen Odaklı Tasarım

Media Queries ekran boyutuna odaklanırken, Container Queries doğrudan bileşenin kapladığı alanı baz alır. Bu sayede aynı bileşeni farklı konteynerlara koyduğunuzda tamamen uyumlu çalışır.

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

Mimari İpucu: Container Queries kullanırken bileşenlerinizin yeniden kullanılabilirliğini (reusability) korumak için global viewports yerine container bazlı değişkenler tanımlamaya özen gösterin.