# CSS Grid

Adres: https://softwaredictionary.org/tr/terimler/css-grid
Kategori: Web Geliştirme
Son güncelleme: 2026-09-30

Kısaca: CSS Grid, öğeleri aynı anda satır ve sütunlar halinde düzenleyen, karmaşık sayfa yerleşimlerini kolayca kurmayı sağlayan iki boyutlu CSS yerleşim sistemidir.

## CSS Grid nedir?

Resmî adı CSS Grid Layout modülü olan CSS Grid, bir kapsayıcıyı satırlara ve sütunlara bölmenizi ve çocuklarını ortaya çıkan hücrelere yerleştirmenizi sağlar. Bir üst öğede `display: grid` ile etkinleştirirsiniz ve her doğrudan çocuk bir grid öğesi olur. Tüm modern tarayıcılarda desteklenir ve üst bilgi, kenar çubuğu, ana içerik ile alt bilgiden oluşan sayfa düzeyindeki yerleşimler için standart araçtır.

Izgara izlerini (track) `grid-template-columns` ve `grid-template-rows` ile tanımlarsınız, `gap` ise aralarındaki boşluğu belirler. `fr` birimi artan alanı paylaştırır; yani `1fr 2fr` ikinci sütunu birincinin iki katı genişliğinde yapar, `repeat(auto-fill, minmax(200px, 1fr))` ise sığdığı kadar sütun oluşturarak tek bir media query olmadan duyarlı bir kart ızgarası sağlar. Öğeler `grid-column: span 2` ile birden çok ize yayılabilir ya da `grid-template-areas` ile çizilen adlandırılmış bölgelere yerleştirilebilir; subgrid ise iç içe öğelerin üst öğenin izleriyle hizalanmasını sağlar.

CSS Grid bir milimetrik kâğıt gibidir: önce satır ve sütunları çizer, sonra her içerik parçasının hangi hücreleri kaplayacağına karar verirsiniz. Yapı üst öğenin CSS'inde durduğu için tüm sayfayı küçük ekranlar için, HTML'e dokunmadan, bir media query içindeki birkaç satırı değiştirerek yeniden düzenleyebilirsiniz.

Klasik karışıklık CSS Grid ile Flexbox arasındadır. Flexbox tek boyutludur: öğeleri tek bir satır ya da sütun boyunca yerleştirir ve yerleşimi içeriğin boyutunun belirlemesine izin verir. Grid ise iki boyutludur ve yerleşim önceliklidir: yapıyı siz tanımlar, içeriği ona yerleştirirsiniz. Çoğu site ikisini de kullanır; genel sayfa için Grid, gezinme çubuğu gibi bir bileşenin içindeki öğeleri hizalamak için Flexbox.

## Önemli noktalar

- `display: grid` bir öğeyi grid kapsayıcısı, doğrudan çocuklarını grid öğesi yapar.
- Grid satırları ve sütunları aynı anda denetler; yani iki boyutludur.
- `fr` birimi, `repeat()` ve `minmax()` esnek, duyarlı izler oluşturur.
- `grid-template-areas`, yerleşimin bölgelerini adlandırmanıza ve öğeleri adlarıyla yerleştirmenize izin verir.
- Genel sayfa yapısı için Grid, tek boyutlu hizalama için Flexbox kullanın.

## Örnek: Bir sayfa yerleşimi ve duyarlı bir kart ızgarası

```css
/* A page layout with named areas */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: 1rem;
}
.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }

/* Cards: as many columns of at least 200px as fit */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
```

## Sık sorulan sorular

**CSS Grid ile Flexbox arasındaki fark nedir?**

CSS Grid iki boyutludur ve satırları ile sütunları birlikte denetler; bu da tüm sayfa yerleşimlerine uygundur. Flexbox ise tek boyutludur ve öğeleri tek bir satır ya da sütun boyunca düzenler; bu da araç çubukları ve menüler gibi bileşenlere uygundur.

**CSS Grid'de 1fr ne anlama gelir?**

`fr`, grid kapsayıcısındaki boş alanın bir kesrini ifade eder. `grid-template-columns: 1fr 1fr 1fr` ile kullanılabilir genişlik üç eşit sütuna bölünür; `2fr` ise `1fr`'ın iki katı pay alır.

**CSS Grid tüm tarayıcılarda destekleniyor mu?**

Evet. Tüm modern tarayıcılar CSS Grid'i 2017'den beri destekliyor; iç içe grid'lerin üst öğeyle hizalanmasını sağlayan subgrid ise 2023 sonundan beri tüm büyük tarayıcılarda mevcut.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt