Tailwind CSS'te grid düzeni kurmak için kapsayıcıya grid sınıfını, sütun sayısı için grid-cols-3 gibi bir sınıfı, satırlar için grid-rows-* sınıfını verirsiniz. grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr)) üretir: üç eşit sütun. Hazır sayılar yetmediğinde grid-cols-[200px_1fr] gibi keyfi şablonlar, iç içe ızgaralar için grid-cols-subgrid, otomatik oluşan satırlar için auto-rows-* kullanılır.

Bu yazı grid şablonunu tanımlayan sınıfları anlatıyor ve her örneği v4.3.5 standalone CLI ile derleyip gerçek CSS çıktısını gösteriyor. Öğelerin birden fazla sütuna yayılması ve belirli çizgilere yerleştirilmesi (col-span-*, col-start-*) col-span ve grid yerleşimi yazısında, hücre içi hizalama hizalama yazısında ele alınıyor. Grid'in CSS kavramları (çizgiler, izler, fr birimi) için CSS grid rehberine bakabilirsiniz.

grid ve inline-grid

grid ve inline-grid

grid sınıfı display: grid, inline-grid ise display: inline-grid üretir. Fark flexbox'takiyle aynıdır: birincisi blok düzeyinde bir kutu oluşturur, ikincisi metin akışında satır içi durur. grid tek başına verildiğinde ve sütun tanımı yapılmadığında öğeler tek sütunda alt alta dizilir; görünüşte normal blok akışına benzer, ama gap-* ile aralarına boşluk koyabilirsiniz. Bu, dikey form alanları ya da kart içi bölümler için kullanışlı bir kısayoldur.

Flexbox'ta olduğu gibi grid sınıfları da yalnızca doğrudan çocukları etkiler. Bir kartın içindeki başlık ve paragraf, kart grid öğesi olsa bile kendi başlarına grid öğesi değildir; onları da hizalamak istiyorsanız kartın kendisini ayrı bir grid ya da flex kapsayıcısı yapmanız gerekir. Subgrid bölümünde bunun daha güçlü bir yolunu göreceksiniz.

grid-cols-N: eşit sütunlar

Resmî belgeye göre grid-cols-<sayı> n adet eşit genişlikte sütun oluşturur. Üretilen kural her zaman repeat(n, minmax(0, 1fr)) biçimindedir. Skill'deki tablo 1, 2, 3, 4, 6 ve 12'yi gösterse de sayı serbesttir: v4.3.5 ile denediğimizde grid-cols-13 ve grid-cols-100 de kural üretti, grid-cols-0 ise hiç üretmedi. grid-cols-none grid-template-columns: none yazarak sütun tanımını kaldırır.

Neden düz 1fr değil de minmax(0, 1fr)? Düz 1fr bir sütunun en küçük boyutunu içeriğin en küçük boyutuna bağlar; içeride kırılmayan uzun bir kelime ya da geniş bir resim varsa o sütun diğerlerinden geniş olur. minmax(0, 1fr) en küçük değeri sıfıra indirdiği için sütunlar gerçekten eşit kalır. Bu Tailwind'in sizin yerinize verdiği bir karardır; keyfi şablon yazarken aynı farkı akılda tutmanız gerekir.

Responsive kart ızgarası bu sınıfın en yaygın kullanımıdır:

html
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <article>Kart 1</article>
  <article>Kart 2</article>
  <article>Kart 3</article>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

Mobilde tek sütun vardır. Ekran genişliği 40rem'e (16px kökte 640px) ulaşınca iki, 64rem'e (1024px) ulaşınca üç sütuna geçilir. Her medya sorgusu kendi bloğunda üretilir ve sonraki blok öncekini ezer. Kartlar arasındaki gap-6 hem satır hem sütun aralığını 1.5rem yapar. Kırılma noktalarını değiştirmek ya da aralık tanımlamak breakpoint özelleştirme yazısında anlatılıyor.

grid-rows-N: satır şablonu

grid-rows-<sayı> aynı mantıkla n eşit satır tanımlar ve grid-template-rows: repeat(n, minmax(0, 1fr)) üretir. Satırların eşit paylaşabileceği bir yükseklik olması gerektiği için bu sınıf genellikle yüksekliği belli bir kapsayıcıyla (örneğin h-96) ya da grid-flow-col ile birlikte kullanılır. Resmî belgedeki örnekte grid grid-flow-col grid-rows-4 verilmiş dokuz öğe, önce dört satırlık bir sütunu doldurup sonra yeni sütuna geçer. grid-rows-none satır tanımını kaldırır.

Bu kalıba farklı satır ve sütun aralıkları ekleyelim. gap belgesinde anlatıldığı gibi gap-x-* sütunlar, gap-y-* satırlar arasındaki boşluğu ayrı ayrı belirler:

html
<div class="grid grid-flow-col grid-rows-4 gap-x-8 gap-y-4">
  <div>01</div>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .grid {
    display: grid;
  }
  .grid-flow-col {
    grid-auto-flow: column;
  }
  .grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
}

Dört satırlık şablon sabittir; öğe sayısı arttıkça grid yeni sütunlar açar, çünkü grid-flow-col yerleştirmeyi sütun sütun yapar. Sütunlar arasında 2rem, satırlar arasında 1rem boşluk kalır. Burada sütun şablonu tanımlamadığımız için yeni sütunlar örtük izdir ve boyutları auto-cols-* ile ayarlanır; bunu aşağıda göreceğiz. Bu düzen, örneğin bir altbilgide bağlantıları dört satırlık sütunlar halinde dizmek için kullanılabilir.

Keyfi şablonlar: grid-cols-[...] ve grid-rows-[...]

Keyfi şablonlar: grid-cols-[...] ve grid-rows-[...]

Eşit olmayan sütunlar gerektiğinde köşeli parantez içine CSS'teki şablonu yazarsınız. Değer içindeki boşluklar alt çizgiyle gösterilir: grid-cols-[16rem_1fr] grid-template-columns: 16rem 1fr üretir. Aşağıdaki sayfa iskeletinde dış grid üç satır (üst bilgi, gövde, alt bilgi), iç grid iki sütun (menü, içerik) tanımlıyor:

html
<div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
  <header>Üst bilgi</header>
  <div class="grid grid-cols-[16rem_1fr]">
    <nav>Menü</nav>
    <main>İçerik</main>
  </div>
  <footer>Alt bilgi</footer>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .grid {
    display: grid;
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .grid-cols-\[16rem_1fr\] {
    grid-template-columns: 16rem 1fr;
  }
  .grid-rows-\[auto_1fr_auto\] {
    grid-template-rows: auto 1fr auto;
  }
}

auto 1fr auto şablonu üst ve alt bilgiye içerikleri kadar yer verir, aradaki gövdeye kalan yüksekliğin tamamını bırakır. Kapsayıcı en az görüntü alanı yüksekliğinde (min-h-dvh, min-height: 100dvh) olduğundan içerik kısa olsa bile alt bilgi sayfanın altına yapışır. Bu kalıbın responsive sürümü sayfa düzeni yazısında adım adım kuruluyor.

Keyfi değer içinde virgül kullanabilirsiniz; seçicide \, olarak kaçışlanır ama CSS'e olduğu gibi geçer. Resmî belgedeki grid-cols-[200px_minmax(900px,_1fr)_100px] örneği v4.3.5'te grid-template-columns: 200px minmax(900px, 1fr) 100px üretti; virgülden sonraki alt çizgi boşluğa dönüştü. Keyfi değer kuralları genel olarak arbitrary values yazısında anlatılıyor.

Medya sorgusu olmadan responsive: auto-fill ve minmax

Kırılma noktası yazmadan, kapsayıcı genişliğine göre kendiliğinden sütun sayısı değiştiren bir ızgara için CSS'teki repeat(auto-fill, minmax(...)) kalıbını keyfi değer olarak yazabilirsiniz:

html
<ul class="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-4">
  <li>Ürün</li>
</ul>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(12rem\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(12rem,1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

Her sütun en az 12rem genişliktedir ve sığdığı kadar sütun açılır. Değerin içinde boşluk olmadığı için alt çizgiye gerek kalmadı. Seçici uzun ve çok kaçışlı görünse de bu sizin yazacağınız bir şey değildir; HTML'de sınıfı olduğu gibi yazmanız yeterlidir. auto-fill ile auto-fit arasındaki fark ve minmax() davranışı saf CSS konusudur, CSS grid rehberinde anlatılıyor. Aynı şablonu birden fazla yerde kullanıyorsanız onu bir CSS değişkenine koyup grid-cols-(--urun-sutun) yazabilirsiniz; resmî belgeye göre parantezli sözdizimi var()'ı sizin yerinize ekler ve v4.3.5'te grid-cols-(--my-cols) grid-template-columns: var(--my-cols) üretti.

subgrid: üst ızgaranın izlerini paylaşmak

Resmî belgeye göre grid-cols-subgrid ve grid-rows-subgrid, bir öğenin kendi sütun ya da satır izlerini tanımlamak yerine üst grid'in izlerini benimsemesini sağlar. Pratik bir örnek: yan yana kartlarda başlık, metin ve bağlantının, kartların içerik uzunluğu farklı olsa bile aynı hizada durmasını istiyorsunuz.

html
<div class="grid grid-cols-3 gap-4">
  <article class="row-span-3 grid grid-rows-subgrid">
    <h3>Başlık</h3>
    <p>Metin</p>
    <a href="#">Devamı</a>
  </article>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .row-span-3 {
    grid-row: span 3 / span 3;
  }
  .grid {
    display: grid;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-subgrid {
    grid-template-rows: subgrid;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

Her kart üst ızgarada üç satıra yayılır (row-span-3) ve kendisi de bir grid olup satırlarını subgrid ile üst ızgaradan alır. Böylece tüm kartların başlık satırı, metin satırı ve bağlantı satırı ortak izlere bağlanır. Subgrid'in çalışması için öğenin üst ızgarada kaç iz kaplayacağını (row-span-* ya da col-span-*) belirtmeniz gerekir; belgedeki sütun örneğinde de iç ızgara col-span-3 ile üç sütuna yayılır.

Örtük izler: auto-cols ve auto-rows

Şablonda tanımladığınızdan fazla öğe olduğunda grid yeni satırları (ya da grid-flow-col ile yeni sütunları) kendisi oluşturur. Resmî belgeye göre auto-rows-* ve auto-cols-* bu örtük izlerin boyutunu belirler. v4.3.5 çıktıları: auto-rows-auto auto, auto-rows-min min-content, auto-rows-max max-content, auto-rows-fr minmax(0, 1fr); sayı verirseniz boşluk ölçeği kullanılır ve auto-rows-24 calc(var(--spacing) * 24) üretir. auto-cols-* aynı değerleri grid-auto-columns için yazar.

html
<div class="grid grid-flow-col auto-cols-max gap-2">
  <span>Etiket 1</span>
  <span>Etiket 2</span>
</div>
<div class="grid grid-cols-2 auto-rows-fr gap-4">
  <div>Kısa</div>
  <div>Çok daha uzun içerik</div>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .grid {
    display: grid;
  }
  .auto-cols-max {
    grid-auto-columns: max-content;
  }
  .grid-flow-col {
    grid-auto-flow: column;
  }
  .auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

İlk kapsayıcı öğeleri yan yana yeni sütunlara dizer ve her sütunu içeriği kadar geniş tutar. İkincisi iki sütunlu bir ızgarada otomatik oluşan her satırı eşit yükseklikte tutar; kartların satırlar arasında da aynı boyda görünmesini istediğinizde işe yarar. Yerleştirme yönünü belirleyen grid-flow-* sınıfları grid yerleşimi yazısında daha ayrıntılı anlatılıyor.

Hazır sınıf, keyfi değer ya da değişken: hangisi?

Grid şablonu için üç yazım biçimi var ve her birinin doğru olduğu bir durum bulunuyor. Eşit sütunlar gerekiyorsa hazır grid-cols-N sınıfı her zaman ilk tercih olmalıdır: kısa, okunaklı ve minmax(0, 1fr) sayesinde taşmaya karşı güvenlidir. Eşit olmayan ama tek bir yerde kullanılan bir şablon (bir sayfanın kenar çubuğu ile içerik oranı gibi) için köşeli parantezli keyfi değer uygundur; değer HTML'de, kullanıldığı yerde görünür. Aynı karmaşık şablon birden çok bileşende tekrarlanıyorsa ya da değerin çalışma anında değişmesi gerekiyorsa, değeri bir CSS değişkenine koyup parantezli sözdizimiyle okumak bakımı kolaylaştırır: şablonu tek bir yerde değiştirirsiniz ve tüm kullanımlar güncellenir.

Derlenen CSS'teki seçicilerin uzunluğu sizi yanıltmasın. .grid-cols-\[16rem_1fr\] gibi seçicilerde köşeli parantez, normal parantez ve virgül ters eğik çizgiyle kaçışlanır, çünkü bu karakterler CSS seçicilerinde özel anlam taşır. HTML'de sınıfı kaçışsız yazarsınız; kaçışlama işini derleyici yapar. Değerin kendisi ise bildirimde olduğu gibi durur ve alt çizgiler boşluğa dönüşür. Tek istisna, değer içinde gerçekten alt çizgi gereken durumlardır; bunun kuralları arbitrary values yazısında anlatılıyor.

Şablon sınıflarının özeti

SınıfÜretilen CSS
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-nonegrid-template-columns: none
grid-cols-subgridgrid-template-columns: subgrid
grid-cols-[16rem_1fr]grid-template-columns: 16rem 1fr
grid-cols-(--my-cols)grid-template-columns: var(--my-cols)
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr))
grid-rows-[auto_1fr_auto]grid-template-rows: auto 1fr auto
auto-cols-maxgrid-auto-columns: max-content
auto-rows-frgrid-auto-rows: minmax(0, 1fr)
auto-rows-24grid-auto-rows: calc(var(--spacing) * 24)

Tablodaki tüm değerler v4.3.5 ile derlenen çıktıdan alındı. Kural basit: sayı alan şablon sınıfları eşit izler üretir, köşeli parantez CSS değerini olduğu gibi aktarır, parantezli sözdizimi bir değişkeni var() ile okur. Aynı sınıfların hepsi md: gibi responsive öneklerle birleşir; resmî belgedeki grid-cols-1 md:grid-cols-6 örneği küçük ekranda tek, orta boy ve üstünde altı sütun kullanır.

Sık yapılan hatalar

Sık yapılan hatalar: grid-cols'u grid olmadan yazmak., Keyfi şablonda boşluk bırakmak., Sütun sayısını değişkenle üretmek., Eşit sütun beklerken düz 1fr yazmak.
  • grid-cols'u grid olmadan yazmak. grid-cols-3 bir kural üretir ama display: grid yoksa etkisizdir. İki sınıf birlikte gider.
  • Keyfi şablonda boşluk bırakmak. grid-cols-[200px 1fr] sınıf özniteliğinde iki ayrı sınıfa bölünür. Değer içindeki boşlukları alt çizgiyle yazın: grid-cols-[200px_1fr].
  • Sütun sayısını değişkenle üretmek. grid-cols-${n} gibi birleştirilmiş adlar taranamaz; olası sınıfları tam haliyle yazın ya da @source inline() ile güvence altına alın.
  • Eşit sütun beklerken düz 1fr yazmak. grid-cols-[1fr_1fr] içerik geniş olduğunda eşit kalmayabilir; hazır grid-cols-2 sınıfı minmax(0, 1fr) kullanır.
  • grid-rows-N ile yükseklik vermemek. Eşit satırlar ancak paylaşılacak bir yükseklik varsa anlamlıdır; yoksa satırlar içerik kadar kalır.

Sık Sorulan Sorular

Tailwind'de 12 sütunlu grid nasıl kurulur?

Kapsayıcıya grid grid-cols-12 verin, öğelerin kaç sütun kaplayacağını col-span-* ile belirleyin. Ayrıntılı örnek col-span yazısında bulunuyor.

grid-cols için en fazla kaç sütun yazılabilir?

Resmî belge sınıfı grid-cols-<sayı> olarak tanımlar ve bir üst sınır vermez. v4.3.5 ile grid-cols-100 derlendi; grid-cols-0 ise kural üretmedi.

Flexbox yerine ne zaman grid kullanmalıyım?

Öğelerin hem satırda hem sütunda ortak çizgilere oturması gerekiyorsa grid; tek eksende içeriğe göre dizilmesi yetiyorsa flexbox daha az sınıfla iş görür. Flexbox sınıfları flexbox yazısında anlatılıyor.

Kartlarım neden aynı yükseklikte değil?

Grid aynı satırdaki öğeleri varsayılan olarak satır yüksekliğine uzatır, ama farklı satırlar içeriklerine göre farklı yükseklikte olabilir. Tüm otomatik satırları eşitlemek için kapsayıcıya auto-rows-fr verin; v4.3.5'te bu grid-auto-rows: minmax(0, 1fr) üretir. Kartların içindeki başlık ve metin bölümlerinin de hizalanmasını istiyorsanız yukarıdaki subgrid örneğini kullanın. Satır içindeki uzatma davranışını değiştirmek için hizalama sınıfları hizalama yazısında anlatılıyor.

grid-template-areas için hazır sınıf var mı?

Okuduğumuz grid-template-columns ve grid-template-rows belgelerinde bu özellik için hazır bir sınıf yer almıyor. İhtiyaç duyarsanız keyfi özellik sözdizimini arbitrary values yazısından inceleyebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind CSS öğrenme rehberi · col-span ve grid yerleşimi · grid hizalama sınıfları · Tailwind responsive tasarım · CSS grid rehberi · Tailwind CSS sıfırdan rehber