CSS Grid öncesinde, düzgün bir sayfa düzeni oluşturmak float'lar, clearfix'ler, negatif marginler ve sütunların çökmemesi için dua anlamına geliyordu. Flexbox yardımcı oldu, ancak temelde tek boyutludur — bir satır ya da bir sütun alırsınız, ikisini birden değil. CSS Grid, CSS'e özgü olarak iki boyutlu düzenler için tasarlanmış ilk düzen sistemidir. Zorluk tarayıcı desteği değil — 2017'den beri evrensel. Zorluk, API'nin çok geniş bir yüzeye sahip olması ve temel model net değilse kafa karıştıracak kadar tutarsız bir isimlendirmeye sahip olmasıdır. Bu makale gerçek çalışmada kullanacağınız kısımlara odaklanır.

Satırlar, Sütunlar ve Grid Kapsayıcısı

Her şey kapsayıcıdaki display: grid ile başlar. Bir kez ayarlandığında, doğrudan çocuklar otomatik olarak grid öğelerine dönüşür — onlara sınıf gerekmez. Sütun ve satır izlerini grid-template-columns ve grid-template-rows ile tanımlarsınız.

Önce anlamanız gereken temel birim fr — kesirli birim. Sabit boyutlu izler hesaba katıldıktan sonra grid kapsayıcısındaki mevcut alanın bir kesrini temsil eder. Bir 1fr, "kalan alanın bir payını al" anlamına gelir. İki 1fr 1fr sütunu eşit yarılar anlamına gelir. 2fr 1fr, ilk sütunun ikincinin iki katını aldığı anlamına gelir. Bu, akışkan ızgaraları doğal hissettiren birimdir.

css
/* 3-column blog card layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

/* repeat(3, 1fr) is shorthand for: 1fr 1fr 1fr */
/* auto rows size to their content */

repeat(n, track), aynı iz boyutunu beş kez yazmak zorunda kalmamanız için bir kısayoldur. Karma değerlerle de çalışır: repeat(3, 1fr 2fr) size dar ve geniş izlerin dönüşümlü olduğu 6 sütunlu bir grid verir. Satırlar için, auto neredeyse her zaman istediğiniz şeydir — açıkça sabit bir yüksekliğe ihtiyaç duymadıkça satırlar içeriklerine göre boyutlanır.

html
<div class="card-grid">
  <article class="card">
    <img src="/posts/grid-post-1.jpg" alt="CSS Grid post 1">
    <h2>Getting Started with Grid</h2>
    <p>A practical intro for developers moving from Flexbox.</p>
  </article>
  <article class="card">
    <img src="/posts/grid-post-2.jpg" alt="CSS Grid post 2">
    <h2>Grid vs Flexbox</h2>
    <p>Which layout tool to reach for, and when.</p>
  </article>
  <article class="card">
    <img src="/posts/grid-post-3.jpg" alt="CSS Grid post 3">
    <h2>Responsive Grids Without Media Queries</h2>
    <p>Using minmax() to handle reflow automatically.</p>
  </article>
</div>

gap Özelliği

Grid öncesinde, düzen çocukları arasına boşluk eklemek margin anlamına geliyordu — ve marginler, son çocuğu sıfırlamayı hatırlamak, çöküşlerle başa çıkmak ve compensate etmek için kapsayıcıya negatif marginler eklemek anlamına geliyordu. gap bunu temiz bir şekilde çözer. Yalnızca izler arasına boşluk ekler, gridın dış kenarlarına asla eklemez.

css
/* Uniform gap between all rows and columns */
.card-grid {
  gap: 1.5rem;
}

/* Different row and column gaps */
.dashboard {
  row-gap: 2rem;
  column-gap: 1rem;
}

/* gap is shorthand: row-gap then column-gap */
.dashboard {
  gap: 2rem 1rem;
}
Not: gap Flexbox'ta da çalışır (eski grid-gap takma adının yerini aldı). Bir bileşen için zaten Flexbox kullanıyorsanız ve yalnızca öğeler arasına boşluk ihtiyacınız varsa, Grid'e geçmeden orada da gap kullanabilirsiniz.

Öğeleri Açıkça Yerleştirme

Varsayılan olarak, grid öğeleri kaynak sırasına göre bir sonraki mevcut hücreye akar. Ancak Grid'in gerçek gücü, öğeleri istediğiniz yere yerleştirebilmeniz — hatta birden fazla izi kapsatabilmenizdir. Özellikler, 1'den numaralandırılmış grid çizgilerine (izler arasındaki çizgiler) atıfta bulunan grid-column ve grid-row'dur.

css
/* Dashboard where the first card spans 2 columns */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.card--featured {
  grid-column: 1 / 3;   /* start at line 1, end at line 3 */
}

/* span keyword: simpler when you don't care about exact position */
.card--featured {
  grid-column: span 2;  /* occupy 2 column tracks from wherever it lands */
}

/* Spanning rows too */
.card--tall {
  grid-row: span 2;     /* occupy 2 row tracks */
}

/* Explicit positioning: place a panel in column 3-5, row 1-2 */
.sidebar {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

Çizgi numaraları sol/üst kenar için 1'den başlar ve n iz sayısı olmak üzere n+1'e kadar çıkar. Negatif çizgi numaraları sağ/alttan sayar: grid-column: 1 / -1, kaç sütun olursa olsun bir öğeyi gridın tam genişliğine yayar — çok sütunlu bir kapsayıcı içindeki tam genişlikli öğeler için kullanışlı bir hile.

grid-template-areas — Düzeninize İsim Verin

Bu, Grid'i sayfa düzeyi düzenler için gerçekten harika yapan özelliktir ve tüm CSS'deki en okunabilir API'dir. Öğeleri çizgi numaralarıyla yerleştirmek yerine, CSS'de ASCII sanatı olarak düzeni çizersiniz, ardından her öğeye hangi adlandırılmış alanı işgal ettiğini söylersiniz. grid-template-areas spesifikasyonu, her satırın aynı sayıda hücreye sahip olmasını gerektirir ve her adlandırılmış alan dikdörtgen olmalıdır — L şekilleri yok.

css
/* Full page layout: header, sidebar, main, footer */
.page-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }
html
<div class="page-shell">
  <header class="page-header">Site header / nav</header>
  <nav class="page-sidebar">Sidebar navigation</nav>
  <main class="page-main">Primary content</main>
  <footer class="page-footer">Footer</footer>
</div>

Şablon dizesindeki nokta (.), kasıtlı olarak boş bir hücre bırakır. Aynı adı birden fazla hücreye yığarak bunları kapsatabilirsiniz — yukarıdaki "header header" tam olarak bunu yapar. Farklı görünüm noktaları için düzeni yeniden boyutlandırdığınızda veya yeniden yapılandırdığınızda, birden fazla grid-column bildirimini aramak yerine şablon dizesini tek bir yerde güncellersiniz.

auto-fill ve auto-fit ile minmax()

Sıfır media sorgusuyla responsive ızgaraların arkasındaki desen, Grid'in en pratik hilelerinden biridir: repeat(auto-fill, minmax(250px, 1fr)). Ayrıştırıldığında — minmax(250px, 1fr), her sütunun en az 250px genişliğinde olması gerektiğini ancak mevcut alanı doldurmak için genişleyebileceğini söyler. auto-fill, Grid'e bu kısıtlama göz önünde bulundurulduğunda kapsayıcıya sığacak kadar çok sütun oluşturmasını söyler. Sonuç, görünüm alanı değiştikçe otomatik olarak sütun kazanıp kaybeden bir ızgaradır.

css
/* Product card grid — reflows automatically, no media queries */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* auto-fit collapses empty tracks — items stretch to fill the container */
.product-grid--stretch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

auto-fill ile auto-fit arasındaki fark, sütunlardan daha az öğe olduğunda önemlidir. auto-fill ile Grid, boş olsalar bile potansiyel izler için alan ayırır — öğeler minimum genişliklerinde kalır. auto-fit ile boş izler sıfıra çöker ve öğeler satırı doldurmak için genişler. Öğelerin mevcut alanı kullanmasını istediğiniz ürün ızgaraları ve galerileri için genellikle auto-fit daha iyi görünür. Tutarlı öğe genişliğinin kapsayıcıyı doldurmaktan daha önemli olduğu ızgaralar için auto-fill doğru tercihtir.

Tarayıcı desteği notu: auto-fill ve auto-fit ile minmax() mükemmel desteğe sahiptir — caniuse'a göre küresel olarak %97+. Bu deseni herhangi bir modern projede fallback olmadan bugün kullanabilirsiniz.

Grid'de Hizalama

Grid, Flexbox ile aynı Box Alignment modülünü kullanır, bu nedenle Flexbox'ı zaten biliyorsanız özellik adları doğrudan eşleşir. Temel zihinsel model: justify, inline eksen üzerinde çalışır (çoğu yazma modunda yatay), align, blok eksen üzerinde çalışır (dikey).

  • justify-items / align-items — tüm öğeler için grid hücreleri içindeki varsayılan hizalama. Varsayılan stretch'tir, bu yüzden grid öğeleri hücrelerini otomatik olarak doldurur.
  • justify-content / align-content — grid kapsayıcıdan küçük olduğunda izlerin kendisini kapsayıcı içinde dağıtır (flex kapsayıcıdaki Flexbox justify-content'e benzer).
  • justify-self / align-self — tek bir öğe için hizalamayı geçersiz kılar. Bir öğenin diğerleri uzanırken ortalanması gerektiğinde kullanışlıdır.
  • Değerler: start, end, center, stretch, space-between, space-around, space-evenly (son üçü yalnızca *-content için).
css
/* Center all card content within its cell */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;     /* cards align to their cell top, not stretched */
  gap: 1.5rem;
}

/* Center a single call-to-action card both ways */
.card--cta {
  justify-self: center;
  align-self: center;
}

/* Distribute tracks with space between — useful for nav bars */
.nav-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
}

Flexbox'tan geliyorsanız, temel fark, Grid hizalamasının iki boyutlu bir uzayda çalışmasıdır — her iki ekseni aynı anda kontrol edebilirsiniz. Flexbox'ta çapraz eksen hizalaması tüm bir satır veya sütun öğelerine uygulanır; Grid'de her öğenin kendi hücresi vardır, bu nedenle justify-self ve align-self size sarıcı öğeler gerekmeden öğe başına kontrol sağlar.

Gerçek Dünya Düzeni: Eksiksiz Dashboard Shell

İşte bir dashboard uygulaması için eksiksiz bir CSS Grid sayfa yapısı — başlık, daraltılabilir nav kenar çubuğu, kendi dahili ızgarasıyla ana içerik alanı ve altbilgi. Bu, bir SaaS dashboard'u veya yönetici paneli için en dıştaki düzen kabuğu olarak kullanacağınız desendir.

css
/* ── Dashboard shell ──────────────────────────────────── */
.dashboard-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 56px 1fr 44px;
  grid-template-areas:
    "topbar  topbar"
    "sidenav content"
    "sidenav footer";
  min-height: 100vh;
}

.dashboard-topbar  { grid-area: topbar;  background: #1e293b; }
.dashboard-sidenav { grid-area: sidenav; background: #0f172a; overflow-y: auto; }
.dashboard-content { grid-area: content; padding: 1.5rem; overflow-y: auto; }
.dashboard-footer  { grid-area: footer;  background: #f8fafc; border-top: 1px solid #e2e8f0; }

/* ── Collapsed sidebar variant ────────────────────────── */
.dashboard-shell--collapsed {
  grid-template-columns: 56px 1fr;
}

/* ── Content area — internal card grid ─────────────────── */
.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: auto;
  align-content: start;
  gap: 1.25rem;
}

/* Stat cards take one column each; the main chart spans all */
.stat-card  { /* auto-placed, one column */ }
.main-chart { grid-column: 1 / -1; }   /* always full width */

/* ── Responsive: collapse to single-column on small screens */
@media (max-width: 768px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto 44px;
    grid-template-areas:
      "topbar"
      "content"
      "sidenav"
      "footer";
  }
}
html
<div class="dashboard-shell">
  <header class="dashboard-topbar">
    <a href="/dashboard" class="brand">AppName</a>
    <nav class="topbar-actions">
      <button class="btn-icon" aria-label="Notifications">
        <span class="icon-bell"></span>
      </button>
      <img src="/avatar/user.png" class="user-avatar" alt="User menu">
    </nav>
  </header>

  <nav class="dashboard-sidenav">
    <ul>
      <li><a href="/dashboard">Overview</a></li>
      <li><a href="/dashboard/analytics">Analytics</a></li>
      <li><a href="/dashboard/users">Users</a></li>
      <li><a href="/dashboard/settings">Settings</a></li>
    </ul>
  </nav>

  <main class="dashboard-content">
    <div class="stat-card">Monthly Revenue</div>
    <div class="stat-card">Active Users</div>
    <div class="stat-card">Churn Rate</div>
    <div class="main-chart">Revenue Chart (full width)</div>
  </main>

  <footer class="dashboard-footer">
    <p>AppName v2.4.1 &mdash; <a href="/status">System Status</a></p>
  </footer>
</div>

Bu örnekte not etmeye değer birkaç şey. Altbilgi, şablon alan tanımı kullanılarak büyük ekranlarda sidenav sütununa yerleştirilir; bu da onu ana içerik kaydırma alanından görsel olarak ayrı tutar. Satırlardaki 1fr ve içerik bölmesindeki overflow-y: auto, içerik alanının bağımsız olarak kaydırıldığı anlamına gelir — topbar ve sidenav yerinde kalır; bu standart dashboard UX'tir. Alttaki @media sorgusu, HTML'ye hiç dokunmadan mobil için grid alanlarını yeniden düzenler.

Sonuç

CSS Grid'in öğrenme eğrisi çoğunlukla isimlendirmeden gelir — çizgiler, izler, alanlar, fr birimleri — ancak model oturduğunda, dikkat çekici derecede doğrudandır. Gerçek dünya düzenleri için: sayfa kabukları için grid-template-areas kullanın (bir wireframe gibi okunur), responsive kart ızgaraları için repeat(auto-fit, minmax()) kullanın ve standart akışı bozan öğeler için açık grid-column: span N kullanın. Gerçek işin %90'ı için Grid'in tüm API'sine ihtiyacınız yok — bu desenler çoğunu kapsar.

Daha fazla okuma için: CSS-Tricks'in Grid için Tam Kılavuzu en iyi tek sayfalık referanstır; MDN'nin CSS Grid belgeleri her özelliğe derinlemesine girer; ve W3C CSS Grid Level 1 spesifikasyonu, uç durumların tam davranışını anlamak istiyorsanız şaşırtıcı derecede okunabilirdir. Tarayıcı uyumluluğu mükemmeldir — güncel sayılar için caniuse.com/css-grid'i kontrol edin. Canlı bir proje üzerinde çalışıyorsanız ve CSS'nizi düzenlemek istiyorsanız, bu sitedeki CSS Formatter stil sayfalarınızı düzeltecek ve güzelleştirecektir.

← All CSS articles Browse all categories →