CSS Grid ile Sayfa Düzeni Oluşturma

CSS Grid, sayfayı satır ve sütunlara bölmenin en güçlü yoludur. Kart ızgaraları için idealdir.

Temel grid

.kutu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 eşit sütun */
  gap: 16px;
}

1fr 'bir birim boşluk' demektir; üç 1fr üç eşit sütun yapar. gap aralarına boşluk koyar.

Duyarlı (responsive) ızgara

.kutu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Bu satır sihirlidir: ekran daraldıkça sütun sayısı otomatik azalır. Kart listelerinde en çok kullanılan kalıptır.