Tailwind CSS Grid Hizalama: justify-items, justify-self, content ve place-*

Temel ayrım: items, self ve content

CSS hizalama özellikleri üç soruya cevap verir ve Tailwind sınıf adları bu soruları doğrudan yansıtır:

• Her öğe kendi hücresinin içinde nerede durur? Bunu kapsayıcıdaki justify-items-* (satır yönü) ve items-* (blok yönü) belirler.
• Tek bir öğe bu kuraldan nasıl ayrılır? Öğedeki justify-self-* ve self-* ile.
• Izgaranın tamamı kapsayıcının içinde nerede durur? İzlerin toplamı kapsayıcıdan küçükse artan boşluğu justify-* (justify-content) ve content-* (align-content) dağıtır.

place-* sınıfları bunların iki eksenli kısaltmalarıdır: place-items-* items ikilisini, place-self-* self ikilisini, place-content-* content ikilisini tek bildirimle yazar. Aşağıdaki tablo hepsini bir arada gösteriyor:

justify-items: hücre içinde yatay hiza

Resmî belge justify-items-* sınıflarını grid öğelerinin satır içi eksende hizalanması için tanımlar ve tüm örneklerinde grid kullanır. v4.3.5 çıktıları: justify-items-start start, justify-items-end end, justify-items-center center, justify-items-stretch stretch, justify-items-normal normal; güvenli sürümler justify-items-center-safe safe center ve justify-items-end-safe safe end yazar.

Grid hücresindeki öğeler varsayılan olarak hücreyi yatayda doldurur. justify-items-center verdiğinizde her öğe kendi içeriği kadar daralır ve hücrenin ortasına geçer; arka plan rengi olan kutularda farkı hemen görürsünüz. Bu daralma bazen istenmeyen bir yan etkidir: hücreyi dolduran bir buton ya da giriş alanı birden içerik genişliğine iner. Böyle bir durumda tüm kapsayıcının hizasını değiştirmek yerine yalnızca o öğeye justify-self-stretch verip yeniden genişletebilirsiniz.

Güvenli sürümlerin işlevi, resmî belgeye göre, yer yetmediğinde öğeyi başlangıca yaslamaktır. Belge justify-items-end-safe için bunu açıkça yazar; center-safe için de aynı davranışı tarif eder. Hücreden geniş olabilecek içeriklerde (uzun bir ürün adı, geniş bir tablo) bu sürümler içeriğin sol tarafının görünmez hale gelmesini önler.

justify-self: tek öğeyi ayırmak

justify-self-* aynı hizayı tek bir öğe için ezer. Belgeye göre justify-self-auto öğeyi kapsayıcının justify-items değerine bağlar. Aşağıdaki örnekte kapsayıcı tüm öğeleri ortalıyor, ikinci öğe sağa yaslanıyor, üçüncüsü hücreyi dolduruyor:

<div class="grid grid-cols-3 justify-items-center gap-4">
  <div>01</div>
  <div class="justify-self-end">02</div>
  <div class="justify-self-stretch">03</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .justify-items-center {
    justify-items: center;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .justify-self-stretch {
    justify-self: stretch;
  }
}

Burada derleyicinin gerçek çıktısı ile belgedeki tablo arasında bir fark var ve bunu bilmekte yarar var: resmî belgenin tablosu justify-self-end için justify-self: end yazıyor, v4.3.5 CLI ise justify-self: flex-end üretti. Aynı şekilde justify-self-start flex-start, güvenli sürümler safe flex-end üretti. justify-items-* ailesi ise belgeyle aynı şekilde start ve end yazıyor. Bu yazıda gösterdiğimiz CSS derleyicinin gerçek çıktısıdır; kendi projenizde emin olmak için derlenen dosyaya bakmanız en doğrusu.

content-*: satırları kapsayıcıya dağıtmak

content-* sınıfları align-content yazar ve belgedeki tüm örneklerde, yüksekliği içerikten fazla olan bir grid'de satırların dikey eksende nasıl toplanacağını gösterir. v4.3.5 çıktıları: content-start flex-start, content-center center, content-end flex-end, content-between space-between, content-around space-around, content-evenly space-evenly, content-stretch stretch, content-baseline baseline, content-normal normal.

<div class="grid h-56 grid-cols-3 content-between gap-4">
  <div>01</div><div>02</div><div>03</div><div>04</div><div>05</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .content-between {
    align-content: space-between;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

Beş öğe üç sütunlu ızgarada iki satır oluşturur. Kapsayıcı h-56 ile 14rem yüksekliğindedir ve satırlar bu alanı doldurmaz. content-between ilk satırı üste, ikinci satırı alta yaslar ve artan boşluğu aralarına koyar. Resmî belgedeki tarife göre content-around her satırın etrafına eşit boşluk verdiği için kenarlardaki boşluk satır aralarındakinin yarısı olur; content-evenly ise kenarlar dahil tüm boşlukları eşit tutar.

content-*'in etkisini görmek için iki koşul gerekir: kapsayıcının içerikten yüksek olması ve birden fazla satırın bulunması. Yükseklik verilmemiş bir grid'de satırlar zaten kapsayıcıyı tam doldurduğundan dağıtılacak boşluk yoktur ve sınıf görünür bir şey yapmaz. Flexbox'ta da bu sınıf yalnızca flex-wrap ile birden fazla satıra bölünmüş kapsayıcılarda anlam taşır.

place-content ve place-items: aynı görünür ama farklıdır

İki sınıf da "ortala" der gibi görünür, ama farklı şeyleri ortalar. Aynı dört öğeyi iki farklı kapsayıcıya koyalım:

<div class="grid h-48 grid-cols-2 place-content-center gap-4">
  <div>01</div><div>02</div><div>03</div><div>04</div>
</div>
<div class="grid h-48 grid-cols-2 place-items-center gap-4">
  <div>01</div><div>02</div><div>03</div><div>04</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .place-content-center {
    place-content: center;
  }
  .place-items-center {
    place-items: center;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
}

place-content-center izlerin bütününü taşır: belgeye göre öğeleri her iki eksende kapsayıcının merkezine toplar. İki sütun minmax(0, 1fr) olduğundan yatayda zaten tüm genişliği kaplarlar; bu yüzden asıl etki dikeyde görülür ve iki satır 12rem'lik kapsayıcının ortasında bir blok halinde durur. place-items-center ise izlere dokunmaz: satırlar kapsayıcıyı doldurur, her öğe kendi hücresinin içinde ortalanır ve içeriği kadar küçülür. Kısacası birincisi ızgarayı, ikincisi hücre içeriğini ortalar.

v4.3.5'te place-content-* için center, start, end, between, around, evenly, baseline, stretch ve güvenli center-safe, end-safe sürümleri; place-items-* için start, end, center, baseline, stretch ve yine iki güvenli sürüm üretiliyor. Burada place-* aileleri flex-start değil start ve end yazar.

place-self ve güvenli hizalama

place-self-* tek bir öğenin hücre içindeki yerini iki eksende birden belirler. Belgeye göre place-self-auto öğeyi kapsayıcının place-items değerine bırakır. Güvenli sürümler, belgede justify-content için anlatıldığı gibi, yer yetmediğinde öğeyi başlangıca yaslayarak taşmayı önlemek içindir:

<div class="grid grid-cols-3 place-items-start gap-4">
  <div class="place-self-center">01</div>
  <div class="place-self-end-safe">02</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .place-items-start {
    place-items: start;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .place-self-center {
    place-self: center;
  }
  .place-self-end-safe {
    place-self: safe end;
  }
}

Kapsayıcı tüm öğeleri hücrelerinin sol üst köşesine yerleştirir. 01 bu kuraldan çıkıp hücresinin ortasına, 02 sağ alt köşesine geçer; 02'nin içeriği hücreden genişse güvenli hizalama onu başlangıca yaslar. Tek satırlık bu ızgarada satır yüksekliği içerik kadar olduğundan dikey etki ancak öğeler farklı yükseklikteyse görülür.

stretch, normal ve baseline

Hizalama ailelerinin neredeyse hepsinde üç özel değer bulunur ve bunlar sık yanlış anlaşılır. stretch öğeyi ya da izleri mevcut alanı dolduracak şekilde uzatır. Resmî belgeye göre justify-items-stretch öğeleri satır yönünde, place-items-stretch iki eksende birden uzatır; content-stretch ise satırların büyüyerek boş alanı doldurmasını sağlar. Uzatma, yalnızca öğeye sabit bir boyut verilmediğinde işe yarar: w-32 verilmiş bir öğe stretch ile genişlemez.

normal değeri bir sınıfı "geri almak" için vardır. Belgeye göre content-normal paketlemeyi hiçbir align-content değeri verilmemiş gibi varsayılana döndürür; justify-items-normal de tabloda yer alır. Responsive bir düzende küçük ekranda verdiğiniz bir hizayı geniş ekranda kaldırmak istediğinizde, başka bir değer seçmek yerine md:content-normal gibi bir sınıf yazmak niyetinizi daha açık gösterir.

baseline öğeleri metinlerinin taban çizgisine göre hizalar. Farklı yazı boyutlarında başlık ve fiyat gibi öğelerin aynı satırda düzgün görünmesi için kullanılır. Belgede items-baseline-last ve self-baseline-last için verilen örnek bir grid kart düzenidir: yükseklikleri farklı kartlarda son metin satırları aynı çizgiye oturur. place-content-baseline ve place-items-baseline da tabloda yer alır, ancak belgede bunlar için bir kullanım örneği bulunmuyor.

Uygulamalı örnek: iki sütunlu form

Hizalama sınıflarının en pratik kullanımlarından biri, etiketlerin solda sağa yaslı, alanların sağda durduğu klasik formdur. Flex ile her satırı ayrı ayrı kurmak yerine tek bir grid yeterlidir:

<form class="grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2">
  <label class="justify-self-end" for="ad">Ad</label>
  <input id="ad">
  <label class="justify-self-end" for="eposta">E-posta</label>
  <input id="eposta">
  <button class="col-start-2 justify-self-start">Gönder</button>
</form>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .col-start-2 {
    grid-column-start: 2;
  }
  .grid {
    display: grid;
  }
  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .items-center {
    align-items: center;
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
}

İlk sütun auto olduğu için en uzun etiket kadar genişler; böylece tüm alanlar aynı dikey çizgiden başlar. Kapsayıcıdaki items-center her etiketi kendi alanıyla dikeyde ortalar. Etiketlerdeki justify-self-end kısa etiketleri sütunun sağ kenarına, yani alanın hemen yanına yaslar. Buton col-start-2 ile ikinci sütuna yerleşir; justify-self-start olmasaydı hücreyi yatayda doldurur ve alan kadar genişlerdi. Görüldüğü gibi bir formun tüm hizası, tek kapsayıcı ve birkaç öğe sınıfıyla kurulabiliyor. Form alanlarının durum stilleri form durumları yazısında anlatılıyor.

Responsive hizalama ve flex ile karşılaştırma

Belgelerdeki her hizalama sınıfı responsive öneklerle çalışır. Aşağıdaki örnekte hücre içerikleri küçük ekranda sola, orta boy ve üstünde ortaya hizalanıyor:

<div class="grid grid-cols-2 justify-items-start md:justify-items-center">
  <div>01</div>
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .justify-items-start {
    justify-items: start;
  }
  @media (width >= 48rem) {
    .md\:justify-items-center {
      justify-items: center;
    }
  }
}

Flex ile grid arasında hizalama açısından önemli bir fark vardır. Flex'te her öğe kendi içeriği kadar yer kaplar ve ana eksendeki dağılım tamamen justify-*'e bağlıdır; öğe başına yatay hiza sınıfı yoktur. Grid'de ise her öğenin bir hücresi vardır, bu yüzden hem hücre içi hiza (justify-items, justify-self) hem de izlerin toplu dağılımı (justify-*, content-*) ayrı ayrı ayarlanabilir. Çapraz eksendeki items-* ve self-* ise iki düzende de çalışır; belgedeki items-baseline-last ve self-baseline-last örnekleri bir grid üzerinde gösterilir.

Sık yapılan hatalar

• Flex kapsayıcısında justify-items beklemek. Belge bu sınıfları grid için anlatır; flex'te ana eksen için justify-* kullanın.
• Yüksekliği olmayan kapsayıcıda content-* denemek. Dağıtılacak boşluk yoksa görünür bir sonuç olmaz; önce kapsayıcıya yükseklik verin.
• place-content ile place-items'ı birbirinin yerine kullanmak. Kartları ortada bir blok olarak toplamak istiyorsanız place-content-*, her hücrenin içeriğini ortalamak istiyorsanız place-items-* seçin.
• Hizalamayı yanlış öğeye vermek. *-items ve *-content kapsayıcıya, *-self öğeye verilir.
• Belge tablosunu çıktı yerine koymak. justify-self-end örneğinde gördüğümüz gibi belge ile derleyicinin yazdığı değer farklı olabilir; kesin bilgi için derlenen CSS'e bakın.

Sık Sorulan Sorular

place-items-center ile items-center justify-center aynı mı?

Grid kapsayıcısında place-items-center, align-items ve justify-items değerlerini birlikte center yapar. justify-center ise justify-content yazdığı için hücre içeriğini değil izlerin bütününü taşır. Yani grid'de items-center justify-center ile place-items-center aynı CSS'i üretmez.

justify-items flexbox'ta çalışır mı?

Resmî belge justify-items-* sınıflarını grid öğeleri için anlatır ve tüm örneklerde grid kullanır. Flexbox'ta ana eksen hizası için justify-* sınıflarını kullanın.

justify-self-end neden flex-end üretiyor?

v4.3.5 CLI'ın gerçek çıktısında justify-self-end justify-self: flex-end, justify-self-start justify-self: flex-start yazıyor; resmî belgenin tablosunda ise end ve start görünüyor. Bu yazıdaki örnekler derleyicinin çıktısını gösterir. Bir grid hücresinde öğeyi sağa ya da sola yaslamak için sınıfı belgede anlatıldığı gibi kullanabilirsiniz; üretilen değeri kendi projenizde doğrulamak için derlenen CSS dosyasına bakın.

content-* sınıfları neden etki etmiyor?

Büyük olasılıkla kapsayıcıda dağıtılacak boş alan yoktur. Grid'e h-56 gibi bir yükseklik verin ya da flex'te flex-wrap ile birden fazla satır oluşturun.

-safe sürümlerini ne zaman seçmeliyim?

Ortalanan ya da sona yaslanan içeriğin kapsayıcıdan geniş olabileceği her yerde. Resmî belgeye göre bu sürümler yer yetmediğinde öğeyi başlangıca yaslar ve içeriğin görünmeyen tarafa taşmasını önler.

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 · col-span ve grid yerleşimi · Tailwind flexbox sınıfları · Tailwind ile div ortalama · CSS grid rehberi