Çalıştırılabilir CSS Dokümanları: CSS grid

Q: CSS grid'de 1fr ne anlama gelir?

fr, grid kapsayıcısındaki boş alanın bir payıdır. grid-template-columns: 1fr 1fr 1fr üç eşit sütun verir, 1fr 2fr ise ikinci sütunu ilkinin iki katı genişliğinde yapar. Önce sabit boyutlar ve boşluklar çıkarılır; fr sütunları kalanı paylaşır.

Q: auto-fill ile auto-fit arasındaki fark nedir?

İkisi de sığdığı kadar sütun oluşturur. auto-fill boş sütunları tutar, bu yüzden az sayıda öğe dar kalır ve satırın sonunda boş alan bırakır. auto-fit boş sütunları çökertir, bu yüzden öğeler satırı dolduracak şekilde esner. Satırı dolduracak kadar öğe varsa ikisi aynı görünür.

Q: Bir grid öğesi iki sütuna nasıl yayılır?

Öğeye grid-column: span 2 ver ya da başlangıç ve bitiş çizgilerini ver: grid-column: 1 / 3, 1. ve 2. sütunları kaplar. grid-column: 1 / -1 tam genişliğe yayılır, çünkü -1 son çizgidir.

Q: grid-gap ile gap aynı şey mi?

Evet. grid-gap, grid-row-gap ve grid-column-gap eski adlardır. Tarayıcılar onları hâlâ takma ad olarak kabul eder, ama flexbox'ta da çalışan gap, row-gap ve column-gap yaz.

Üç satırda bir grid

Bir kapsayıcıya display: grid ver ve sütunlarını grid-template-columns ile listele. Çocuklar hücreleri sırayla, İngilizcede soldan sağa doldurur ve sütunlar dolduğunda yeni bir satır başlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Yedi öğe, üç sütun: iki dolu satır ve ilk sütununda öğe 7 olan üçüncü bir satır. Her sütun aynı genişlikte ve bir satırdaki her öğe aynı yükseklikte, bu yüzden kenarlar iki yönde de hizalanıyor. Grid'in flexbox'a kattığı şey budur.

Grid oyun alanı

Herhangi bir grid-template-columns değeri yaz ya da bir hazır ayara tıkla. Gösterge, tarayıcının hesapladığı sütun genişliklerini (getComputedStyle'dan) ve öğelerin kaç satıra ihtiyaç duyduğunu gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Görülecek bazı şeyler: 1fr 2fr ikinci sütunu tam olarak ilkinin iki katı yapar. 200px 1fr 200px'i korur ve geri kalanı ikinci sütuna verir. auto 1fr auto dış sütunları içeriklerine göre boyutlandırır. repeat(4, 100px) sonunda boş alan bırakır, çünkü hiçbir şey esnek değildir. 1fr 2 gibi geçersiz bir değer yok sayılır ve grid son geçerli değeri korur.

fr birimi

fr, "boş alanın bir payı" demektir. Tarayıcı önce sabit sütunları (px, rem, %, auto içerik) ve boşlukları çıkarır, sonra kalanı fr sütunları arasında sayılarına göre paylaştırır.

600px'lik bir kapsayıcıda `grid-template-columns`, boşluk yok	Sütun genişlikleri
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr, % ile aynı değildir: yüzdeler artı boşluklar %100'ü aşıp taşabilir, fr sütunları ise her zaman yalnızca boşluklardan sonra kalanı paylaşır.

repeat(), minmax() ve medya sorgusu olmadan esnek bir grid

repeat(4, 1fr), 1fr 1fr 1fr 1fr demektir. minmax(120px, 1fr) asla 120px'ten dar olmayan ve bir pay almak için büyüyen bir sütundur. Bir sayı yerine auto-fill ya da auto-fit ile birleştir, grid sığdığı kadar sütun oluşturur:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Bu tek bildirim, kapsayıcının sığdırabildiği kadar en az 180px'lik sütun verir: geniş bir ekranda birkaç tane, bir telefonda bir tane, hiç medya sorgusu olmadan. auto-fill ile auto-fit arasındaki fark, sütunlardan daha az öğe olduğunda ortaya çıkar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Kapsayıcıya beş 100px'lik sütun sığıyor. auto-fill beşini de tutuyor, bu yüzden A, B ve C her biri 112px ve iki boş sütun kalıyor. auto-fit boş olanları çökertiyor, bu yüzden üç öğe her biri yaklaşık 187px'e esniyor.

Öğeleri yerleştirmek: grid-column ve grid-row

Grid çizgileri başlangıç kenarından itibaren 1'den numaralanır. grid-column: 1 / 3, "1. çizgiden 3. çizgiye" demektir, yani iki sütun. span 2, "nereye düşersen oradan iki sütun" demektir ve -1 son çizgidir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Koyu öğe bütün ilk satırı dolduruyor. Mavi olan 2'ye 2'lik bir bloğu, kehribar rengi olan iki satırı kaplıyor. a ve b öğeleri kalan hücreleri kendiliğinden dolduruyor: grid yerleştirebildiği her öğeyi bir sonraki boş hücreye koyar. grid-auto-rows: 60px, grid-template-rows ile tanımlamadığın satırların yüksekliğini ayarlar.

grid-template-areas: bir düzenin parçalarını adlandır

Bir sayfa düzeni için alanları adlandır ve onları metin olarak çiz. Her metin bir satır, her kelime bir hücredir ve bir öğe grid-area ile bir alana katılır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Başlık ve alt bilgi iki sütuna yayılıyor, çünkü adları satırlarının iki hücresini de dolduruyor. Ortadaki satır 1fr, bu yüzden 280px'ten kalan yüksekliği alıyor. Bir telefonda her şeyi üst üste dizmek için bir medya sorgusunun alanları yalnızca tek sütun olarak yeniden çizmesi yeterlidir: grid-template-columns: 1fr ile grid-template-areas: "header" "side" "main" "footer". Kalıbı medya sorguları sayfası gösteriyor.

Hücrelerin içinde hizalamak

Grid öğeleri varsayılan olarak hücrelerini dolduracak şekilde esner. Bu özellikler onları hücrenin içinde hareket ettirir:

Özellik	Nereye	Neyi taşır
`justify-items`	kapsayıcı	her öğeyi satır boyunca (satır içi eksen)
`align-items`	kapsayıcı	her öğeyi yukarı aşağı (blok ekseni)
`place-items`	kapsayıcı	kısa yazım: `place-items: center` ikisinde de ortalar
`justify-self` / `align-self`	öğe	tek bir öğeyi
`justify-content` / `align-content`	kapsayıcı	grid kapsayıcıdan küçük olduğunda bütün izler kümesini

display: grid; place-items: center;, bir kutuda tek bir çocuğu ortalamanın en kısa yoludur.

Grid mi flexbox mı

Grid iki boyutludur: sütunlara (ve satırlara) sen karar verirsin ve içerik onları doldurur, bu yüzden bir galerideki her kart son satırda bile aynı genişliktedir. Flexbox tek boyutludur: öğeler tek bir çizgi boyunca kendilerini içeriklerine göre boyutlandırır. İkisi iyi karışır: sayfa ve kart galerisi için grid, her kartın içindeki başlık satırı için flexbox. Diğer yarıyı flexbox sayfası anlatıyor.

Sıra ve erişilebilirlik

grid-template-areas, grid-row, grid-column ve order bir öğeyi herhangi bir yere yerleştirebilir, ama ekran okuyucular ve Tab tuşu hâlâ HTML sırasını takip eder. Kaynak sırasını anlamlı tut (başlık, gezinme, ana içerik, alt bilgi) ve grid'i onu düzenlemek için kullan, anlamsız bir HTML sırasını düzeltmek için değil.

Sık yapılan hatalar

display: grid'i öğelere vermek. Ebeveyne verilir; yalnızca doğrudan çocuklar grid öğesidir.
Boşluklarla yüzde kullanmak. grid-template-columns: 50% 50% artı gap: 16px 16px taşar. 1fr 1fr kullan.
auto-fit isterken auto-fill. Az öğeyle auto-fill boş sütunlar bırakır. Öğeleri esnetmek için auto-fit'e geç.
Payının ötesine büyüyen bir 1fr sütun. Bir 1fr sütun en uzun içeriğinin (uzun bir URL, geniş bir resim) altına küçülmez. Küçülmesine izin vermek için minmax(0, 1fr) kullan.
Dikdörtgen olmayan alan metinleri. Her adlandırılmış alan bir dikdörtgen oluşturmalı ve her satır metninde aynı sayıda hücre olmalıdır, yoksa bütün grid-template-areas bildirimi yok sayılır.
Çizgi numaralarının 1'den başladığını unutmak. Üç sütunun dört çizgisi vardır: 1 / 4 ya da 1 / -1 üçünü de kaplar.

Sıkça Sorulan Sorular

CSS grid nedir?

Elementleri aynı anda satırlara ve sütunlara yerleştiren bir düzen sistemidir. Bir kapsayıcıya display: grid verirsin, sütunlarını grid-template-columns ile (ve isteğe bağlı olarak satırlarını) tarif edersin ve doğrudan çocukları hücreleri sırayla doldurur.

CSS grid'de 1fr ne anlama gelir?

fr, grid kapsayıcısındaki boş alanın bir payıdır. grid-template-columns: 1fr 1fr 1fr üç eşit sütun verir, 1fr 2fr ise ikinci sütunu ilkinin iki katı genişliğinde yapar. Önce sabit boyutlar ve boşluklar çıkarılır; fr sütunları kalanı paylaşır.

auto-fill ile auto-fit arasındaki fark nedir?

İkisi de sığdığı kadar sütun oluşturur. auto-fill boş sütunları tutar, bu yüzden az sayıda öğe dar kalır ve satırın sonunda boş alan bırakır. auto-fit boş sütunları çökertir, bu yüzden öğeler satırı dolduracak şekilde esner. Satırı dolduracak kadar öğe varsa ikisi aynı görünür.

Bir grid öğesi iki sütuna nasıl yayılır?

Öğeye grid-column: span 2 ver ya da başlangıç ve bitiş çizgilerini ver: grid-column: 1 / 3, 1. ve 2. sütunları kaplar. grid-column: 1 / -1 tam genişliğe yayılır, çünkü -1 son çizgidir.

Flexbox yerine ne zaman grid kullanmalıyım?

Satırların ve sütunların birbiriyle hizalanması gerektiğinde grid kullan: kart galerileri, hizalı etiketli formlar, başlık, kenar çubuğu ve alt bilgisi olan bir sayfa. Öğeleri kendilerini içeriklerine göre boyutlandıran tek bir satır ya da sütun için, örneğin bir gezinme çubuğu için flexbox kullan.

grid-gap ile gap aynı şey mi?

Evet. grid-gap, grid-row-gap ve grid-column-gap eski adlardır. Tarayıcılar onları hâlâ takma ad olarak kabul eder, ama flexbox'ta da çalışan gap, row-gap ve column-gap yaz.

İlgili kavramlar