CSS Grid, sayfayı satır ve sütunlardan oluşan bir ızgaraya bölerek iki boyutlu düzenler kurmanı sağlar. Kart listeleri, galeriler ve sayfa iskeletleri için Flexbox'tan daha güçlüdür.

1) Grid kabı ve sütunlar

.izgara {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3 eşit sütun */
  gap: 16px;                            /* öğeler arası boşluk */
}

2) Duyarlı ızgara (otomatik sütun)

Ekran daraldıkça sütun sayısı kendiliğinden azalsın istersen:

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

Bu satır, her öğeye en az 200px verir ve sığdığı kadar sütun oluşturur — mobilde tek sütun, geniş ekranda birden çok sütun.

3) Satır yüksekliği

.izgara {
  display: grid;
  grid-template-rows: 100px auto;
}

Grid ve Flexbox birbirinin rakibi değildir; genelde sayfanın büyük iskeletini Grid ile, kart içini Flexbox ile kurarsın.