Modern CSS Rehberi: Subgrid, CSS Nesting ve Container Queries

1. CSS Nesting Kullanımı

Sass gereksiz. Native nesting doğrudan tarayıcıda çalışır. Sözdizimi:

.card {
  padding: 1rem;
  background: #fff;

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    border-color: #000;
  }
}

Önemli kural: Seçici özgüllüğü korur. Build aracı gerektirmez.

2. Container Queries ile Modüler Bileşen Yapımı

Media query viewport genişliğine bakar. Container query ata elemanın boyutuna bakar. Bileşeni bağımsız yapar.

Adım 1: Konteyner Tanımla

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

Adım 2: Kuralı Yaz

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }
}

Sonuç: Kart, dar alanda tek sütun, geniş alanda iki sütun dizilir. Dijital strateji içinde tasarım sistemi maliyetini düşürür.

3. CSS Subgrid ile Hizalama

Grid içinde grid elemanları bağımsız çalışır, satır yükseklikleri bozulur. Subgrid ata ızgara satırlarını alt elemana aktarır.

Uygulama

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

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Kart başlıkları, metinleri ve butonları otomatik hizalanır. JS hesaplaması kalkar.

Uygulama Özeti

• Sass nesting yerine native nesting kullan. Dependency sil.
• Ekran değil bileşen bazlı duyarlılık için container query kur.
• Kırık kart hizaları için subgrid kullan.