CSS Grid ile nasıl bir layout oluşturursunuz?

Question

Accepted Answer

**CSS Grid** iki boyutlu bir layout sistemidir — **satırları ve sütunları aynı anda kontrol eder**, Flexbox'ın tek satırından farklı olarak. Konteynerde bir grid tanımlarsınız ve öğeleri içine yerleştirirsiniz.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## fr birimi ve repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") mevcut alanı dağıtır — `1fr 2fr` bunu 1:2 oranında böler. `repeat(3, 1fr)` üç eşit track için kısa yazımdır.

## Media queryler OLMADAN responsive grid

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Bu tek satır tamamen responsive bir kart gridı oluşturur: her sütun en az `250px`; tarayıcı **mümkün olduğu kadar çok** sütunu satır başına sığdırır ve kalanı sarmalır — masaüstünde 4 sütundan mobilde 1'e otomatik olarak geçer. `auto-fit` + `minmax` Grid'in en sevilen desenlerinden biridir.

## Öğeleri hücreler arasında yerleştirme

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Öğeler birden fazla satır/sütun kapsayabilir ve Flexbox ile uygulanması zor olan dergi tarzı layoutlara olanak tanır.

## Grid vs Flexbox

- **Grid** — 2D layout (satırlar *ve* sütunlar): sayfa layoutları, kart gridleri, gösterge tabloları.
- **Flexbox** — 1D layout (tek satır veya sütun): gezinti çubukları, düğme grupları, ortalama.

İyi bir şekilde birleşirler — bir grid hücresi kendisi bir flex konteyner olabilir.

## Neden önemli

Grid, CSS'nin en güçlü layout aracıdır — tam sayfa layoutları ve responsive kart gridlerini temiz bir şekilde ele alır, sıklıkla iç içe div hack'lerinin yerine geçer.

`auto-fit`/`minmax` responsive deseni tek başına birçok media query ihtiyacını ortadan kaldırır.