Bootstrap Gutter Sınıfları: g-*, gx-*, gy-* ve g-0

Gutter nasıl çalışır?

Belgeler gutter mekanizmasını üç maddede özetler: gutter'lar sütun içerikleri arasındaki boşluklardır ve yatay padding ile oluşturulur; her sütuna padding-right ve padding-left verilir, satırın başında ve sonunda ise negatif margin ile bu boşluk dengelenir. Gutter'lar 1.5rem (24px) genişlikte başlar, böylece grid boşlukları padding ve margin ölçeğiyle uyumlu olur. Son olarak gutter'lar kesme noktalarına göre ayrı ayrı ayarlanabilir.

Bootstrap 5'in bunu yapma biçimi CSS değişkenlerine dayanır. Satır kuralı iki değişken tanımlar ve hem kendi margin'ini hem de doğrudan çocuklarının padding'ini bu değişkenlerden hesaplar. Bootstrap 5.0.2 derlenmiş CSS dosyasında ilgili kurallar şöyledir:

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  /* (kısaltıldı) */
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
  /* (kısaltıldı) */
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
/* (kısaltıldı) */
.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

Gutter sınıfları yalnızca bu iki değişkenin değerini değiştirir; padding ve margin hesapları kendiliğinden güncellenir. .gx-3 yatay değişkeni, .gy-3 dikey değişkeni, .g-3 ise ikisini birden ayarlar. CSS değişkenlerinin temel mantığını merak ediyorsanız CSS değişkenleri yazısına bakabilirsiniz.

Bu yapıdan önemli bir sonuç çıkar: varsayılan satırda dikey gutter sıfırdır. Yani sütunlar alt satıra geçtiğinde aralarında dikey boşluk olmaz. Kart listelerinde alt alta gelen kartların birbirine yapışmasının sebebi budur; çözümü satıra bir .gy-* ya da .g-* sınıfı vermektir.

Negatif margin neden var? Basit bir hesap

Negatif margin ilk bakışta gereksiz görünebilir, ama hizalamanın anahtarıdır. Varsayılan değerlerle hesaplayalım. Container her iki yanda 0.75rem padding taşır. İçindeki satır -0.75rem yan margin ile bu padding'i tam olarak geri alır, yani satırın kenarı container'ın dış kenarına oturur. Satırdaki ilk sütun yeniden 0.75rem sol padding alır ve içeriği container'ın kenarından 0.75rem içeride başlar.

Sonuç: container'a doğrudan yazdığınız bir başlık ile altındaki grid sütunlarının içeriği aynı dikey çizgiden başlar. Satırın negatif margin'i olmasaydı ilk sütunun içeriği başlıktan 0.75rem daha içeride kalırdı. Belgelerin "içeriğin sol tarafta görsel olarak hizalanması" dediği şey budur. Bu dengeyi bozan her durum (container olmadan satır kullanmak, gutter'ı büyütüp container padding'ini aynı bırakmak) ya taşmaya ya da kaymaya yol açar.

<div class="container">
  <h2>Bölüm başlığı</h2>
  <div class="row">
    <div class="col-md-6">Bu metin başlıkla aynı hizadan başlar.</div>
    <div class="col-md-6">İkinci sütun.</div>
  </div>
</div>

Değer ölçeği

Gutter sınıfları $gutters Sass haritasından üretilir. v5.0.2 kaynağında bu harita doğrudan boşluk haritasına eşitlenmiştir ($gutters: $spacers !default;), bu yüzden değerler margin ve padding yardımcılarıyla birebir aynıdır. Aşağıdaki tabloda piksel karşılıkları kök yazı boyutu 16px iken verilmiştir:

Son sütun, yatay gutter değerinin yarısının her sütunun iki yanına padding olarak eklendiğini gösterir. Dikey gutter için durum farklıdır: --bs-gutter-y değeri bölünmeden her sütunun margin-top değeri olur ve satır, aynı miktarı negatif üst margin ile geri alır. Böylece ilk satırdaki sütunların üstünde fazladan boşluk kalmaz.

Yatay gutter: gx-*

.gx-* sınıfları sütunlar arasındaki yatay boşluğu ayarlar. Burada belgelerin özellikle uyardığı bir durum vardır: büyük gutter kullanırsanız üst öğedeki .container ya da .container-fluid sınıfının da ayarlanması gerekebilir, aksi halde istenmeyen bir taşma (overflow) oluşur. Sebebi hesapla görülebilir. Container'ın yan padding'i varsayılan olarak 0.75rem'dir. .gx-5 ile satırın negatif margin'i her iki yanda -1.5rem olur; satır, container'ın padding'inden 0.75rem daha dışarı uzanır.

Belgeler iki çözüm önerir. Birincisi container'ın padding'ini eşleşen bir padding yardımcısıyla büyütmektir; örnekte .px-4 kullanılır ve bu sınıf derlenmiş CSS'te padding-right: 1.5rem !important; padding-left: 1.5rem !important; olarak tanımlıdır, yani .gx-5'in yarısına tam olarak eşittir:

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3 border bg-light">Geniş yatay boşluk</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Geniş yatay boşluk</div>
    </div>
  </div>
</div>

İkinci çözüm, satırın çevresindeki kapsayıcıya .overflow-hidden vermektir. Bu sınıf overflow: hidden !important; kuralını uygular ve taşan kısmı keser. Hangi yöntemi seçeceğiniz tasarıma bağlıdır: padding ile çözmek içeriği container'ın içine doğru iter, overflow ile çözmek container genişliğini korur ama taşan alanı gizler. Overflow yardımcılarının diğer değerleri Bootstrap boyut ve overflow sınıfları yazısında.

Dikey gutter: gy-*

.gy-* sınıfları alt satıra geçen sütunlar arasındaki dikey boşluğu ayarlar. Belgeler, yatay gutter'da olduğu gibi dikey gutter'ın da sayfanın sonunda satırın altında bir taşmaya yol açabileceğini belirtir ve aynı çözümü, satırı .overflow-hidden taşıyan bir kapsayıcıya almayı önerir.

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6"><div class="p-3 border bg-light">Hücre 1</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 2</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 3</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 4</div></div>
  </div>
</div>

Bu örnekte dört tane .col-6 iki satıra dağılır ve iki satır arasında 3rem dikey boşluk oluşur. Yatay gutter varsayılan değerinde kalır, çünkü yalnızca dikey değişken değiştirildi.

İki yönde birden: g-*

.g-* sınıfı hem yatay hem dikey değişkeni aynı değere ayarlar. Belgelerdeki örnekte .g-2 kullanılır ve küçük bir değer olduğu için .overflow-hidden sarmalayıcısına ihtiyaç kalmadığı belirtilir: .g-2 ile satırın yan negatif margin'i -0.25rem olur, bu da container'ın 0.75rem padding'i içinde kalır.

<div class="container">
  <div class="row g-2">
    <div class="col-6"><div class="p-3 border bg-light">Hücre 1</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 2</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 3</div></div>
    <div class="col-6"><div class="p-3 border bg-light">Hücre 4</div></div>
  </div>
</div>

Duyarlı gutter ve row-cols

Gutter sınıfları tüm kademelerde üretilir: .g-md-3, .gx-lg-5, .gy-sm-0 gibi. Kaynaktaki döngü her kesme noktası için hem .g, hem .gx, hem .gy sınıflarını aynı medya sorgusu içinde oluşturur. Mobile-first kural burada da geçerlidir: .g-2 .g-lg-3 yazdığınızda lg altında 0.5rem, lg ve üstünde 1rem boşluk olur.

Gutter sınıfları row-cols sınıflarıyla birlikte de kullanılabilir. Belgelerdeki örnek, ürün ya da galeri listeleri için çok kullanışlı bir kalıptır:

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
    <div class="col"><div class="p-3 border bg-light">Öğe</div></div>
  </div>
</div>

lg altında satır başına iki öğe ve 0.5rem boşluk, lg ve üstünde satır başına beş öğe ve 1rem boşluk vardır. Resmî Bootstrap 5.0 örnek şablonu: Album şablonu da aynı fikri .row-cols-1 .row-cols-sm-2 .row-cols-md-3 .g-3 ile uygular.

Kademe kademe hesap örneği

Bir hizmet paketleri bölümü düşünelim: telefonda paketler tek sütunda ve aralarında küçük bir dikey boşlukla, md ve üstünde üç sütunda ve daha geniş boşluklarla dursun. Satıra .row-cols-1 .row-cols-md-3 .gy-3 .g-md-4 verebilirsiniz.

<div class="container">
  <div class="row row-cols-1 row-cols-md-3 gy-3 g-md-4">
    <div class="col"><div class="p-3 border bg-light">Başlangıç</div></div>
    <div class="col"><div class="p-3 border bg-light">Standart</div></div>
    <div class="col"><div class="p-3 border bg-light">Gelişmiş</div></div>
  </div>
</div>

md altında yalnızca .gy-3 geçerlidir: yatay değişken varsayılan 1.5rem'de kalır, alt alta duran paketler arasında 1rem dikey boşluk olur. md ve üstünde .g-md-4 iki değişkeni de 1.5rem yapar; üç paket yan yana durur ve her sütun iki yanda 0.75rem padding alır. Yan negatif margin hâlâ -0.75rem olduğu için container'ın varsayılan padding'iyle dengelenir ve taşma olmaz.

Gutter'ı kaldırmak: g-0

.g-0 önceden tanımlı grid sınıflarındaki sütun aralarındaki boşluğu kaldırır. Belgelere göre bu sınıf satırdaki negatif margin'leri ve doğrudan çocuk sütunların yatay padding'ini ortadan kaldırır; mekanizma olarak iki değişkeni sıfıra eşitler, böylece hem padding hem margin hesapları 0 olur. Kenardan kenara bir tasarım istiyorsanız belgeler üst öğedeki .container ya da .container-fluid sınıfını da kaldırmanızı önerir.

<div class="row g-0">
  <div class="col-sm-6 col-md-8">Görsel alanı</div>
  <div class="col-6 col-md-4">Metin alanı</div>
</div>

.g-0 diğer grid sınıflarıyla (genişlikler, kademeler, sıralama) birlikte çalışmaya devam eder. Yalnızca yatay boşluğu kaldırıp dikey boşluğu korumak isterseniz .gx-0, tersini istiyorsanız .gy-0 kullanabilirsiniz. Bootstrap 4'ten gelenler için not: geçiş rehberine göre .no-gutters sınıfı yeni gutter yardımcılarıyla uyumlu olsun diye .g-0 olarak yeniden adlandırıldı; eski ad 5.0.2 CSS dosyasında bulunmaz.

Sass tarafı

Varsayılan yatay gutter $grid-gutter-width değişkeninden gelir, sınıfların ölçeği ise $gutters haritasından. Belgeler haritayı açık değerlerle gösterir; v5.0.2 kaynağında ise harita $spacers'a eşittir ve bu da aynı değerleri üretir:

// scss/_variables.scss (v5.0.2)
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

$grid-gutter-width:           1.5rem !default;
$gutters: $spacers !default;

$container-padding-x: $grid-gutter-width * .5 !default;

Buradan iki pratik sonuç çıkar. Birincisi, $gutters kendi !default bayrağını taşıyan ayrı bir değişkendir: tanımlanırken $spacers'ın o anki değerini alır, ama isterseniz onu boşluk ölçeğinden bağımsız olarak kendi haritanızla da ezebilirsiniz. İkincisi, container'ın yan padding'i $grid-gutter-width değerinin yarısıdır; varsayılan gutter'ı değiştirdiğinizde container padding'i de buna göre değişir ve hizalama korunur. Kendi semantik satırlarınızı yazarken make-row() mixin'inin bir $gutter parametresi aldığını da bilmekte yarar var; ayrıntılar grid yazısının Sass bölümünde. Değişkenleri ezme sırası için Bootstrap Sass ile özelleştirme yazısına bakın.

Gutter mı, gap mi, margin mi?

Bootstrap 5.0'da öğeler arasına boşluk koymanın üç yolu vardır ve yerleri farklıdır:

• Gutter (.g-*): Yalnızca .row ve onun doğrudan çocuk sütunları için çalışır. Grid ile sütun düzeni kuruyorsanız doğru araç budur.
• Gap (.gap-*): CSS gap özelliğini ayarlar. Spacing belgeleri bunu display: grid kapsayıcıları için anlatır; örneğin .d-grid .gap-3. Ayrıntısı Bootstrap spacing ve gap yazısında.
• Margin yardımcıları (.mb-3 gibi): Tek tek öğelere boşluk verir. Grid dışında, örneğin alt alta duran paragraflar ya da bölümler arasında kullanılır.

Bunları karıştırmamak gerekir. Belgelerde .row üzerinde .gap-* kullanan bir örnek yoktur; satır boşluklarını gutter değişkenleriyle yönetecek biçimde tasarlanmıştır. Üstelik sayılı sütunların yüzde genişlikleri toplamda satırın tamamını dolduracak şekilde hesaplanır, araya eklenen bir gap bu hesabın dışında kalır ve sütunların sığmamasına yol açabilir. Grid içinde boşluk için gutter sınıflarını kullanın.

Sık yapılan hatalar

• Kenarlığı sütunun kendisine vermek: Gutter, sütunun padding'idir. Sütuna .border ya da .bg-light verirseniz boşluk kutunun içinde kalır ve sütunlar bitişik görünür. Belgelerdeki örneklerde olduğu gibi kenarlık ve zemini sütunun içindeki bir div'e verin.
• Büyük gutter'da taşmayı göz ardı etmek: .gx-5 gibi değerlerde yatay kaydırma çubuğu çıkıyorsa container'a .px-4 ekleyin ya da satırı .overflow-hidden bir kapsayıcıya alın.
• Dikey boşluk için her sütuna margin vermek: Alt alta geçen sütunlar arasında boşluk istiyorsanız her sütuna .mb-3 yazmak yerine satıra .gy-3 verin; son satırın altında fazladan boşluk da oluşmaz.
• Gutter'ı satır dışında beklemek: Satırın dışında kullanılan .col-* sınıfları padding almaz; gutter sınıfları da yalnızca satırın doğrudan çocuklarını etkiler.

Sık Sorulan Sorular

Bootstrap 5'te varsayılan gutter kaç piksel?

Varsayılan yatay gutter 1.5rem'dir; belgeler bunu 24px olarak da belirtir (kök yazı boyutu 16px iken). Her sütunun iki yanına bunun yarısı, 0.75rem, padding olarak eklenir. Geçiş rehberine göre Bootstrap 4'te bu değer 30px idi.

Sadece mobilde gutter'ı kaldırabilir miyim?

Evet. Mobile-first mantıkla önce kaldırıp sonra geri ekleyin: .g-0 .g-md-4 md altında boşluksuz, md ve üstünde 1.5rem boşluklu bir düzen verir.

no-gutters sınıfı neden çalışmıyor?

Bu sınıf Bootstrap 4'e aittir. v5'te adı .g-0 oldu. Diğer yeniden adlandırmalar için Bootstrap 4'ten 5'e geçiş yazısına bakın.

gy-* sınıfı ilk satırın üstünde boşluk bırakır mı?

Hayır. Her sütun margin-top olarak dikey gutter değerini alır, ama satır aynı miktarda negatif üst margin taşıdığı için ilk satırdaki sütunların üstündeki boşluk dengelenir.

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: Bootstrap öğrenme rehberi · Bootstrap grid sistemi · Sütun hizalama ve offset · Margin, padding ve gap sınıfları · Container ve container-fluid · CSS değişkenleri