Tailwind'de bir grid öğesini birden fazla sütuna yaymak için col-span-2, satıra yaymak için row-span-2, belirli bir çizgiden başlatıp bitirmek için col-start-* ve col-end-* sınıflarını kullanırsınız. col-span-full öğeyi tüm sütunlara yayar ve grid-column: 1 / -1 üretir. Grid'in öğeleri boşluklara nasıl dizeceğini grid-flow-row, grid-flow-col ve grid-flow-dense belirler.

Bu yazı grid kapsayıcısı kurulduktan sonraki adımı, yani öğelerin yerleşimini anlatıyor. Sütun ve satır şablonunun nasıl tanımlandığı grid-cols ve grid-rows yazısının konusu; burada her örnek v4.3.5 standalone CLI ile derlendi ve gösterilen CSS bu derlemeden alındı. Grid çizgileri kavramının saf CSS anlatımı için CSS grid rehberine bakabilirsiniz.

Grid çizgileri: numaralar nereden geliyor?

Grid çizgileri: numaralar nereden geliyor?

Yerleşim sınıflarını doğru kullanmanın anahtarı, sayıların sütunları değil çizgileri gösterdiğini bilmektir. Altı sütunlu bir ızgarada yedi dikey çizgi vardır: ilk sütunun solundaki çizgi 1, son sütunun sağındaki çizgi 7 numaradır. col-start-2 öğeyi 2 numaralı çizgiden, yani ikinci sütunun başından başlatır; col-end-4 4 numaralı çizgide, yani üçüncü sütunun sonunda bitirir. Sonuç olarak öğe iki sütun kaplar. Bu "bir fazla" ilişkisi, yerleşim hatalarının en sık kaynağıdır.

CSS'te çizgiler sondan da sayılabilir: -1 son çizgi, -2 sondan bir önceki çizgidir. Tailwind bunu başa eksi koyarak ifade eder ve v4.3.5'te -col-end-1 grid-column-end: calc(1 * -1) üretir. Bu sayede sütun sayısını bilmeden "son çizgiye kadar" diyebilirsiniz.

Yerleşim sınıfları iki gruba ayrılır ve bunu bilmek hangi sınıfı seçeceğinizi kolaylaştırır. col-span-* ve row-span-* yalnızca boyutu söyler; öğenin nereye oturacağına grid'in otomatik yerleştirmesi karar verir. col-start-*, col-end-* ve satır karşılıkları ise konumu söyler. İkisini birleştirdiğinizde (örneğin col-start-2 col-span-4) hem başlangıcı hem genişliği sabitlemiş olursunuz.

col-span ve row-span: kaç iz kaplanacak?

Resmî belgeye göre col-span-<sayı> bir öğeyi n sütuna yayar. Üretilen kural grid-column: span n / span n biçimindedir; öğe nereye otomatik yerleşirse yerleşsin n sütun kaplar. row-span-<sayı> aynısını satırlar için grid-row ile yapar. col-span-full ve row-span-full ise sayı yerine 1 / -1 yazar, yani ilk çizgiden son çizgiye uzanır; sütun sayısı responsive olarak değişse bile öğe hep tam genişlikte kalır.

En yaygın kullanım 12 sütunlu bir sayfa düzenidir:

html
<div class="grid grid-cols-12 gap-4">
  <main class="col-span-12 md:col-span-8">Makale</main>
  <aside class="col-span-12 md:col-span-4">Kenar çubuğu</aside>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .grid {
    display: grid;
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  @media (width >= 48rem) {
    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }
    .md\:col-span-8 {
      grid-column: span 8 / span 8;
    }
  }
}

Mobilde iki öğe de 12 sütunun tamamını kaplar ve alt alta dizilir. 48rem (16px kökte 768px) ve üstünde makale 8, kenar çubuğu 4 sütun alır ve yan yana gelir. Aynı sonucu mobilde col-span-full ile de alabilirdiniz; fark yalnızca üretilen CSS'tedir (1 / -1 ile span 12 / span 12). Dikkat ederseniz CSS'te .col-span-12 kuralı .grid'den önce yazıldı; Tailwind kuralları HTML'deki sıraya göre değil kendi iç sıralamasına göre üretir.

col-start ve col-end: belirli çizgilere yerleştirmek

Öğenin nereden başlayıp nerede biteceğini kendiniz belirlemek istediğinizde col-start-* (grid-column-start) ve col-end-* (grid-column-end) kullanırsınız. Resmî belge bunların col-span-* ile birleştirilebileceğini de belirtir. Aşağıdaki örnek belgedeki örneğin son satırını eksi çizgiyle değiştirilmiş halidir:

html
<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2">01</div>
  <div class="col-start-1 col-end-3">02</div>
  <div class="col-span-2 col-end-7">03</div>
  <div class="col-start-1 -col-end-1">04</div>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .-col-end-1 {
    grid-column-end: calc(1 * -1);
  }
  .col-end-3 {
    grid-column-end: 3;
  }
  .col-end-7 {
    grid-column-end: 7;
  }
  .grid {
    display: grid;
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

Satır satır okuyalım. 01 numaralı öğe 2. çizgiden başlar ve dört sütun kaplar, yani 6. çizgide biter; sağında bir sütun boş kalır. 02, 1. çizgiden 3. çizgiye kadar uzanır ve iki sütun kaplar. 03 iki sütun kaplar ve 7. çizgide, yani ızgaranın sağ kenarında biter; başlangıcı bu yüzden 5. çizgiye düşer. 04 ilk çizgiden son çizgiye kadar uzanır. Belgedeki asıl örnekte bu son öğe col-end-7 ile yazılmıştır; -col-end-1 aynı yere denk gelir ama sütun sayısını değiştirdiğinizde güncellemeniz gerekmez.

Ayrıca col-start-auto ve col-end-auto değeri auto'ya, col-auto ise grid-column: auto'ya döndürür; responsive bir düzende önceki yerleşimi iptal etmek için kullanışlıdır. Satır tarafında aynı aile row-start-*, row-end-* ve row-auto adlarıyla vardır.

Satırlarda yerleşim: row-span ve sütun akışı

Satırlarda yerleşim: row-span ve sütun akışı

Satır sınıfları sütun sınıflarının birebir karşılığıdır. Resmî grid-row belgesine göre row-span-<sayı> grid-row: span n / span n, row-span-full grid-row: 1 / -1, row-start-* ve row-end-* ise çizgi numarası yazar; eksi önekli sürümler ve row-[...], row-(--degisken) biçimleri de vardır. Belgedeki örnek satır yayılımını sütun akışıyla birleştiriyor:

html
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-3">01</div>
  <div class="col-span-2">02</div>
  <div class="col-span-2 row-span-2">03</div>
</div>

v4.3.5 ile derlenen CSS:

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

Üç satırlık şablonda 01 ilk sütunun üç satırını da kaplar. grid-flow-col yerleştirmeyi sütun sütun yaptığı için 02 ikinci sütunun başına geçer ve iki sütun genişliğinde ilk satıra oturur; 03 de iki sütun genişliğinde, altındaki iki satırı kaplar. Sütun şablonu tanımlanmadığından bu sütunlar örtük olarak oluşur. Bu kalıp bir profil kartında solda uzun bir fotoğraf, sağda başlık ve açıklama gibi düzenler için kullanılabilir.

Responsive yerleşim: değerleri ekrana göre değiştirmek

Yerleşim sınıflarının hepsi responsive öneklerle birleşir. Bir yerleşimi geniş ekranda değiştirirken dikkat edilecek nokta, küçük ekranda verdiğiniz değeri gerektiğinde açıkça geri almaktır:

html
<div class="grid grid-cols-4 gap-4">
  <img class="col-span-4 md:col-span-2 md:row-span-2" src="kapak.jpg" alt="">
  <p class="col-span-4 md:col-span-2">Metin</p>
  <p class="col-start-2 col-span-3 md:col-start-auto md:col-span-2">Not</p>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .grid {
    display: grid;
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  @media (width >= 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .md\:col-start-auto {
      grid-column-start: auto;
    }
    .md\:row-span-2 {
      grid-row: span 2 / span 2;
    }
  }
}

Küçük ekranda resim ve metin dört sütunun tamamını kaplar, not ise 2. çizgiden başlayıp üç sütun alır ve sağa kaymış görünür. 48rem ve üstünde resim 2x2'lik bir alan, metin ve not ikişer sütun alır. Notun md:col-start-auto sınıfı burada şarttır: o olmasaydı col-start-2 geniş ekranda da geçerli kalırdı. Not 2. çizgiden başlamaya zorlanır, resim ilk iki sütunu iki satır boyunca kapladığı için de ancak üçüncü satıra inebilirdi; metnin altındaki boş hücreler doldurulmazdı. Medya sorgusu içindeki kurallar aynı özelliği sonradan yazdığı için önceki değeri ezer; ezilmeyen özellikler ise küçük ekrandaki değerini korur.

Keyfi değerler ve CSS değişkenleri

Belgeye göre col-[...], col-span-[...], col-start-[...] ve col-end-[...] keyfi değer alır. v4.3.5 çıktıları: col-[16_/_span_16] grid-column: 16 / span 16, col-span-[16] grid-column: span 16 / span 16, col-span-(--n) grid-column: span var(--n) / span var(--n) üretti. Değişkenli sürüm, sütun sayısı veriden gelen bileşenlerde (örneğin bir pano kutucuğu) style özniteliğinde değişkeni ayarlayıp sınıfı sabit tutmanızı sağlar.

grid-flow: otomatik yerleşimi yönetmek

Yerleşim sınıfı verilmeyen öğeleri grid, otomatik yerleştirme algoritmasıyla sıradaki boş hücreye koyar. Resmî belgeye göre grid-flow-* sınıfları bu algoritmanın çalışma biçimini denetler. v4.3.5 çıktıları: grid-flow-row grid-auto-flow: row, grid-flow-col column, grid-flow-dense dense, grid-flow-row-dense row dense, grid-flow-col-dense column dense.

row öğeleri satır satır doldurur; bu zaten varsayılan davranıştır. col sütun sütun doldurur ve gerekirse yeni sütunlar açar. dense eklendiğinde algoritma geri dönüp önceki boşlukları sonraki küçük öğelerle doldurmaya çalışır. Farklı boyutlu kutuların bulunduğu "bento" tarzı düzenlerde boşluk kalmaması için bu işe yarar:

html
<div class="grid grid-flow-row-dense grid-cols-3 auto-rows-32 gap-4">
  <div class="col-span-2 row-span-2">Öne çıkan</div>
  <div>A</div>
  <div class="col-span-2">B</div>
  <div>C</div>
  <div class="col-span-full">Alt şerit</div>
</div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .row-span-2 {
    grid-row: span 2 / span 2;
  }
  .grid {
    display: grid;
  }
  .grid-flow-row-dense {
    grid-auto-flow: row dense;
  }
  .auto-rows-32 {
    grid-auto-rows: calc(var(--spacing) * 32);
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

Her otomatik satır auto-rows-32 ile 8rem yüksekliğindedir. Öne çıkan kutu sol üstte 2x2'lik alanı kaplar, A sağ üste oturur. B iki sütun ister; ikinci satırın sağında yalnızca bir sütun boş olduğu için üçüncü satıra iner. Yoğun olmayan akışta C, B'den sonra gelirdi ve ikinci satırın sağındaki tek hücre boş kalırdı. dense ile algoritma C'yi geri dönüp o boşluğa yerleştirir. Bunun bedeli, öğelerin görsel sırasının HTML sırasından farklılaşabilmesidir; okuma sırası önemli içeriklerde dense kullanırken bunu hesaba katın.

Kaç sütunlu bir ızgara seçmeli?

Yerleşim sınıflarını kullanmadan önce ızgaranın kaç sütundan oluşacağına karar vermek gerekir. 12 sütun yaygın bir tercihtir, çünkü 12 sayısı 2, 3, 4 ve 6'ya tam bölünür; yarım, üçte bir, dörtte bir ve altıda bir genişlikleri col-span-6, col-span-4, col-span-3 ve col-span-2 ile kurabilirsiniz. Öte yandan her öğe için span yazmak sınıf listesini uzatır. Yalnızca eşit kartlar diziyorsanız sütun sayısını doğrudan kart sayısına eşitlemek (grid-cols-3) ve span hiç kullanmamak daha sadedir. Öne çıkan bir kart ya da tam genişlikte bir başlık gibi istisnalar için col-span-2 veya col-span-full eklemek yeterli olur.

Unutmayın ki grid öğeleri açıkça yerleştirildiğinde aynı hücreleri paylaşabilir. İki öğeye aynı col-start ve row-start değerlerini verirseniz otomatik yerleştirme onları ayırmaz, üst üste bindirir; HTML'de sonra gelen öğe üstte görünür. Bu bir hata olabileceği gibi bilinçli bir teknik de olabilir: bir resmin üstüne yazı bindirmek için ikisini aynı hücreye koymak, konumlandırma kullanmadan katman oluşturmanın yoludur. Üstteki katmanı seçmek için z-* sınıfları kullanılır (position ve z-index yazısı).

Yerleşim sınıflarının özeti

SınıfÜretilen CSS (v4.3.5)
col-span-2grid-column: span 2 / span 2
col-span-fullgrid-column: 1 / -1
col-start-2grid-column-start: 2
col-end-4grid-column-end: 4
-col-end-1grid-column-end: calc(1 * -1)
col-autogrid-column: auto
col-[16_/_span_16]grid-column: 16 / span 16
row-span-2grid-row: span 2 / span 2
row-span-fullgrid-row: 1 / -1
row-start-1grid-row-start: 1
row-end-3grid-row-end: 3
grid-flow-row-densegrid-auto-flow: row dense

Sık yapılan hatalar

Sık yapılan hatalar: Çizgi ile sütunu karıştırmak., Sütun sayısından büyük span vermek., col-span-[span_n] yazmak., Responsive yerleşimi sıfırlamayı unutmak.
  • Çizgi ile sütunu karıştırmak. Üç sütunluk bir öğe için col-start-2 col-end-5 yazılır, col-end-4 değil. Bitiş çizgisi, son sütunun bir fazlasıdır.
  • Sütun sayısından büyük span vermek. grid-cols-3 içinde col-span-4 verilen öğe için grid fazladan örtük bir sütun açar ve düzen beklenmedik biçimde genişler. Tam genişlik için col-span-full daha güvenlidir.
  • col-span-[span_n] yazmak. span iki kez yazılır ve geçersiz bir değer çıkar; col-span-[n] ya da col-[span_n] kullanın.
  • Responsive yerleşimi sıfırlamayı unutmak. Mobilde col-start-2 verip masaüstünde başka bir yerleşim istiyorsanız md:col-start-auto ile önceki değeri geri alın.
  • Grid kapsayıcısı olmadan span vermek. Bu sınıflar yalnızca grid kapsayıcısının doğrudan çocuklarında etkilidir; flex kapsayıcısında hiçbir şey yapmaz.

Sık Sorulan Sorular

col-span-full ile col-span-12 arasında fark var mı?

12 sütunlu bir ızgarada görsel sonuç aynıdır, ama üretilen CSS farklıdır: col-span-full 1 / -1, col-span-12 span 12 / span 12 yazar. Sütun sayısı değişebilecekse col-span-full her zaman tam genişlik verir.

Satır sayısını bilmeden bir öğeyi tüm satırlara yayabilir miyim?

row-span-full grid-row: 1 / -1 üretir, ancak -1 açıkça tanımlanmış son satır çizgisini gösterir. Satırları grid-rows-* ile tanımlamadıysanız ve hepsi örtük olarak oluşuyorsa, bu sınıf beklediğiniz gibi tüm satırları kaplamayabilir. Bu durumda satır şablonunu açıkça yazın ya da row-span-3 gibi kesin bir sayı verin.

Negatif col-start ne işe yarar?

Çizgileri sondan saymanızı sağlar. -col-start-1 grid-column-start: calc(1 * -1) üretir, yani son çizgiyi gösterir. En sık -col-end-1 ile "son çizgiye kadar" anlamında kullanılır.

Öğeleri sütun sütun nasıl doldururum?

Kapsayıcıya grid-flow-col verin ve satır sayısını grid-rows-* ile belirleyin; öğeler önce ilk sütunu yukarıdan aşağı doldurur. Satır şablonu grid-rows yazısında anlatılıyor.

Bir öğenin grid hücresi içindeki hizasını nasıl değiştiririm?

Yerleşim sınıfları öğenin hangi hücrelere oturacağını belirler; hücre içindeki hizası için justify-self-*, self-* ve place-self-* kullanılır. Bunlar grid hizalama yazısında anlatılıyor.

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 · grid-cols ve grid-rows · grid hizalama sınıfları · header, sidebar ve footer düzeni · CSS grid rehberi