Bootstrap 5 Grid Sistemi: container, row ve col ile Düzen Kurmak

Üç katman: container, row ve col

Bootstrap belgelerine göre grid hiyerarşisi her zaman aynı sıradadır: önce bir kapsayıcı (container), onun içinde satır (row), satırın içinde sütunlar (col) ve en içte sizin içeriğiniz. Her katmanın ayrı bir görevi vardır ve birini atladığınızda hizalama bozulmaya başlar.

• Container: İçeriği yatayda ortalar ve iki yanına iç boşluk ekler. .container her kesme noktasında sabit bir azami genişlik kullanır, .container-fluid her ekranda width: 100% olur, .container-md gibi duyarlı sürümler ise belirli bir kesme noktasına kadar tam genişlikte kalır. Ayrıntılar Bootstrap container ve container-fluid yazısında.
• Row: Sütunları saran flex kapsayıcısıdır. Her sütunun yatay iç boşluğu (gutter) vardır; satır bu boşluğu iki uçta negatif margin ile geri alır, böylece sütun içerikleri soldan düzgün hizalanır.
• Col: İçeriğin bulunduğu birimdir. Satır başına 12 şablon sütunu vardır; sınıf adındaki sayı kaç şablon sütunu kaplanacağını söyler. Genişlikler yüzde olarak tanımlandığı için oran her ekranda korunur.

Belgelerdeki ilk örnek bu yapının en sade halidir: bir container, içinde bir row ve üç tane .col. Sayı vermediğiniz için üç sütun her ekran boyutunda eşit genişlikte yan yana durur ve container sayesinde sayfada ortalanır.

<div class="container">
  <div class="row">
    <div class="col">Birinci sütun</div>
    <div class="col">İkinci sütun</div>
    <div class="col">Üçüncü sütun</div>
  </div>
</div>

Derlenmiş CSS ile grid nasıl çalışır?

Grid sistemini ezberlemek yerine arkasındaki birkaç kuralı anlamak, karşılaşacağınız tuhaf durumların çoğunu açıklar. Bootstrap 5.0.2 derlenmiş CSS dosyasında satır ve sütun kuralları şöyle tanımlıdır:

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  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 > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}
/* (kısaltıldı) */
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

Bu kurallardan çıkan sonuçlar şunlar:

• .row bir flex kapsayıcısıdır ve flex-wrap: wrap taşıdığı için toplamı 12'yi aşan sütunlar alt satıra geçer. Flexbox'ın kendisini merak ediyorsanız CSS flexbox rehberine bakabilirsiniz.
• Gutter genişliği --bs-gutter-x adlı bir CSS değişkeninde tutulur. Varsayılan değer 1.5rem'dir; her sütun bunun yarısını sağına, yarısını soluna padding olarak alır. Satır ise aynı miktarı negatif margin ile iki uçtan geri çeker. CSS değişkenleri hakkında temel bilgi için CSS değişkenleri yazısına göz atın.
• Satırın doğrudan çocuğu olan her öğe (.row > *) önce width: 100% alır. Kaynak koddaki açıklamaya göre bu, sütunların küçük ekranlarda fazla daralmasını önlemek içindir; sonradan gelen sütun sınıfları bu genişliği ezer. Yani bir satırın içine sınıfsız bir div koyarsanız o öğe tam genişlikte bir sütun gibi davranır.
• .col sınıfı flex: 1 0 0% ile kalan alanı kardeşleriyle eşit paylaşır. Sayılı sınıflar (.col-6) ise flex: 0 0 auto ve sabit bir yüzde genişlik kullanır.

Yüzdeler 12'ye bölünerek hesaplanır: .col-md-4 derlenmiş dosyada width: 33.33333333% olarak yer alır, .col-6 ise 50%'dir. Ön eksiz sınıflar (.col-6) medya sorgusu olmadan her ekranda geçerlidir; önekli sınıflar (.col-md-4) ise @media (min-width: 768px) gibi bir sorgunun içinde tanımlanır.

Altı kademe ve sınıf önekleri

Bootstrap 5.0 grid sistemi altı varsayılan kesme noktasıyla çalışır. Her kademenin kendi sınıf öneki ve container azami genişliği vardır; sütun sayısı ve gutter genişliği ise tüm kademelerde aynıdır. Aşağıdaki tablo belgelerdeki tabloyu özetler:

Tüm kademelerde sütun sayısı 12, gutter genişliği 1.5rem'dir (sağ ve solda .75rem). Kesme noktaları min-width medya sorgularına dayandığı için bir sınıf kendi kademesini ve ondan büyük tüm kademeleri etkiler: .col-sm-4 sm, md, lg, xl ve xxl ekranlarda dört sütun genişliğindedir. xs için ayrı bir önek yoktur; .col-xs-* diye bir sınıf 5.0.2 CSS dosyasında bulunmaz. Kesme noktalarının Sass tarafı ve mixin'leri Bootstrap breakpoint yazısında anlatılıyor; duyarlı tasarım kavramının kendisi için mobil uyumluluk yazısına bakabilirsiniz.

Otomatik düzen: sayı vermeden sütun kurmak

Eşit genişlikli sütunlar

Bir satıra kaç tane .col koyarsanız alan o kadar eşit parçaya bölünür. İki sütunlu satır yarı yarıya, üç sütunlu satır üçte bir oranında paylaşılır. Bu davranış xs'ten xxl'ye kadar tüm ekranlarda aynıdır; sütun sayısını değiştirmek için yalnızca öğe eklemeniz ya da çıkarmanız yeterlidir.

Tek bir sütunun genişliğini sabitlemek

Flexbox'ın asıl kolaylığı burada ortaya çıkar: Bir sütuna sayı verip diğerlerini .col olarak bırakırsanız, kardeş sütunlar kalan alanı kendi aralarında paylaşır. Aşağıdaki örnekte ortadaki sütun altı şablon sütunu kaplar, iki yandaki sütunlar kalan altı sütunluk alanı eşit böler.

<div class="container">
  <div class="row">
    <div class="col">Kenar</div>
    <div class="col-6">Geniş orta sütun (6/12)</div>
    <div class="col">Kenar</div>
  </div>
</div>

İçeriğe göre genişlik: col-auto

.col-auto ve duyarlı karşılıkları (.col-md-auto gibi) sütunun genişliğini içeriğinin doğal genişliğine göre belirler. Derlenmiş kuralda flex: 0 0 auto; width: auto; yazar. Bir arama kutusunun yanındaki buton ya da bir etiketin yanındaki küçük ikon gibi, ne kadar yer kaplayacağını içeriğin belirlemesini istediğiniz yerlerde işe yarar. Belgelerdeki örnekte .col-md-auto ile işaretlenen orta sütun md ve üstünde metni kadar yer kaplar, yandaki .col sütunlar kalan alanı paylaşır.

Duyarlı sınıflar: ekrana göre değişen düzen

Duyarlı grid'in temel kalıbı "küçük ekranda alt alta, büyük ekranda yan yana" düzenidir. Bunun için tek bir önekli sınıf seti yeterlidir: .col-sm-8 ve .col-sm-4 verdiğiniz iki sütun, sm altındaki ekranlarda .row > * kuralı yüzünden tam genişlikte alt alta dizilir; 576px ve üstünde ise 8'e 4 oranında yan yana durur.

Farklı kademeler için farklı oranlar istediğinizde sınıfları birleştirirsiniz. Bootstrap her sınıfı kendi medya sorgusu içinde tanımladığı ve sorgular küçükten büyüğe sıralandığı için, ekran büyüdükçe daha büyük kademenin sınıfı devreye girer. Aşağıdaki örnek bir ürün listesi için tipik bir düzendir:

<div class="container">
  <div class="row">
    <!-- Telefonda tam genişlik, md ve üstünde 8/12 -->
    <div class="col-md-8">Ana içerik</div>
    <!-- Telefonda yarım genişlik, md ve üstünde 4/12 -->
    <div class="col-6 col-md-4">Yan bilgi</div>
  </div>
  <div class="row">
    <!-- Telefonda iki, md ve üstünde üç ürün yan yana -->
    <div class="col-6 col-md-4">Ürün 1</div>
    <div class="col-6 col-md-4">Ürün 2</div>
    <div class="col-6 col-md-4">Ürün 3</div>
  </div>
</div>

Bu örneği kademe kademe okuyalım. 768px altındaki ekranda ilk satırdaki "Ana içerik" sütununun yalnızca md sınıfı olduğu için width: 100% kuralı geçerlidir ve tam satırı kaplar; "Yan bilgi" ise .col-6 sayesinde yarım genişlikte alt satıra iner. İkinci satırda üç ürün .col-6 ile ikişer ikişer dizilir, üçüncü ürün yeni bir satıra geçer. 768px ve üstünde md sınıfları devreye girer: ilk satır 8'e 4, ikinci satır üç eşit sütun olur.

row-cols: sütun sayısını satırdan yönetmek

Kart listesi gibi aynı genişlikte çok sayıda öğeniz olduğunda her sütuna ayrı sınıf yazmak yerine sütun sayısını satırda belirleyebilirsiniz. .row-cols-* sınıfları .row üzerine yazılır ve doğrudan çocukların hepsine varsayılan bir genişlik verir. Derlenmiş CSS'te .row-cols-3 > * kuralı flex: 0 0 auto; width: 33.3333333333%; şeklindedir. Varsayılan Sass ayarında $grid-row-columns: 6 olduğu için .row-cols-1 ile .row-cols-6 arası sınıflar üretilir; .row-cols-7 yoktur. Ayrıca .row-cols-auto çocuklara içerik genişliği verir.

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
    <div class="col"><div class="p-3 border bg-light">Kart 1</div></div>
    <div class="col"><div class="p-3 border bg-light">Kart 2</div></div>
    <div class="col"><div class="p-3 border bg-light">Kart 3</div></div>
    <div class="col"><div class="p-3 border bg-light">Kart 4</div></div>
  </div>
</div>

Bu kalıp resmî Bootstrap 5.0 örnek şablonu: Album örneğinde de kullanılır: telefonda tek sütun, sm'de iki, md'de üç sütun. .g-3 sütunlar arasında hem yatay hem dikey boşluk açar. row-cols yalnızca bir varsayılandır; belgelerdeki örneklerden birinde olduğu gibi tek bir sütuna .col-6 verirseniz o sütun kendi genişliğini kullanır. Bunun sebebi derlenmiş dosyada .row-cols-* kurallarının her kademede sütun sınıflarından önce yazılmasıdır; kaynaktaki açıklamaya göre bu sıra bilerek seçilmiştir. Kartların kendisi için Bootstrap card yazısına bakabilirsiniz.

İç içe grid

Bir sütunun içinde yeniden grid kurmak için o sütunun içine yeni bir .row ve sütunları eklersiniz; ikinci bir container gerekmez. İç satır da 12 şablon sütununa sahiptir ve bu 12, dıştaki sütunun genişliğine göre hesaplanır. Belgeler iç içe satırdaki sütunların toplamının 12 ya da daha az olması gerektiğini, 12'nin tamamını kullanmak zorunda olmadığınızı belirtir.

<div class="container">
  <div class="row">
    <div class="col-sm-3">Kenar menü</div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">İç sütun A</div>
        <div class="col-4 col-sm-6">İç sütun B</div>
      </div>
    </div>
  </div>
</div>

Burada iç satırın negatif margin'i, dıştaki .col-sm-9 sütununun padding'ini dengeler; bu yüzden iç sütunların içeriği dıştaki sütunun içeriğiyle aynı hizaya oturur.

Sass ile semantik grid

Hazır sınıfları HTML'e yazmak istemiyorsanız, Bootstrap'in Sass kaynak dosyalarını derleyerek aynı grid'i kendi sınıf adlarınızla üretebilirsiniz. Grid'in davranışını belirleyen temel değişkenler _variables.scss dosyasında şöyledir:

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

Belgelerde listelenen mixin'ler mixins/_grid.scss içinde tanımlıdır: make-row() bir öğeyi satır yapar, make-col-ready() genişlik dışındaki tüm sütun özelliklerini verir, make-col($size, $columns) genişliği belirler (boyut vermezseniz .col gibi eşit sütun üretir), make-col-offset() offset ekler ve row-cols() satır başına sütun sayısını ayarlar. Konteyner için make-container() mixin'i vardır. Aşağıdaki örnek belgelerdeki kullanım örneğini izler; derlenmedi, isimler v5.0.2 kaynağıyla karşılaştırıldı:

.sayfa {
  @include make-container();
}

.sayfa-satir {
  @include make-row();
}

.sayfa-icerik {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.sayfa-kenar {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Kademe sayısını da değiştirebilirsiniz. Belgeler, örneğin dört kademe istiyorsanız $grid-breakpoints ve $container-max-widths haritalarını birlikte güncellemenizi ve yeniden derlemenizi söyler. Derleme sonunda sütun, offset ve sıralama sınıfları yeni kademelere göre üretilir, duyarlı görünürlük yardımcıları da güncellenir. Önemli bir kural: grid değerlerini px ile verin; belgeler rem, em ya da % kullanmamanızı belirtir. Sass değişkenlerini doğru sırayla ezmek için Bootstrap Sass ile özelleştirme yazısını okuyun. Hazır grid sınıflarını tamamen kapatmak isterseniz $enable-grid-classes değişkeni vardır; seçenekler Bootstrap enable seçenekleri yazısında.

Sık yapılan hatalar

• Sütunu satırın dışına koymak: .col-* sınıfları satırın doğrudan çocuğu olmadığında padding almaz; belgeler bu durumda gutter'ın uygulanmadığını belirtir. Satır olmadan yan yana dizilme de olmaz, çünkü flex kapsayıcısı .row'dur.
• Container'ı unutmak: Satırın iki yanındaki negatif margin, container'ın iç boşluğu tarafından dengelenir (container'ın padding'i de var(--bs-gutter-x, 0.75rem) kullanır). Container olmadan satır, ebeveyninin kenarlarından dışarı taşabilir. Kenardan kenara bir tasarım istiyorsanız belgeler container'ı kaldırıp satıra .g-0 vermeyi önerir.
• İçeriği doğrudan satıra yazmak: Belgeler tüm içeriğin sütunlara konmasını ister. Satırın içindeki her doğrudan çocuk width: 100% ve gutter padding'i alır; metni doğrudan satıra yazmak beklenmedik boşluklara yol açar.
• md sınıfını telefonda da geçerli sanmak: .col-md-6 yalnızca 768px ve üstünde yarım genişliktir. Telefonda da yarım istiyorsanız .col-6 ekleyin.
• Toplamı 12'yi aşan sütunlar: Fazla sütunlar hata vermez, bir grup halinde alt satıra geçer. Bu bazen istenen bir davranıştır; ayrıntısı sütun hizalama yazısında.
• Bootstrap 4 alışkanlıkları: .no-gutters v5'te .g-0 oldu ve sütunlar artık position: relative taşımıyor; mutlak konumlu bir öğe için sütuna .position-relative eklemeniz gerekebilir. Bu ikisi geçiş rehberinde yazılıdır.
• Flexbox sınırları: Belgeler flexbox'ın bilinen hatalarına ve bazı HTML öğelerinin flex kapsayıcısı olarak kullanılamamasına dikkat çeker. Örneğin satır sınıfını beklenmedik bir öğeye verdiğinizde düzen çalışmıyorsa önce bunu düşünün. Diğer sık hatalar için Bootstrap çalışmıyor: sık hatalar yazısına bakın.

Sık Sorulan Sorular

Bootstrap 5 grid flexbox mu, CSS Grid mi kullanır?

Bootstrap 5.0 grid sistemi flexbox tabanlıdır: .row derlenmiş CSS'te display: flex ve flex-wrap: wrap taşır. CSS Grid ile düzen kurmak isterseniz .d-grid ve .gap-* yardımcıları vardır (spacing ve gap yazısı); saf CSS Grid kavramları için CSS Grid rehberine bakın.

12 sütundan fazlasını kullanabilir miyim?

Evet, iki yolu var. Tek satırda toplamı 12'yi aşan sütunlar alt satıra geçer. Şablon sütun sayısının kendisini değiştirmek istiyorsanız $grid-columns değişkenini değiştirip Sass'ı yeniden derlemeniz gerekir; belgeler bu değişkenin her sütunun yüzde genişliğini hesaplamakta kullanıldığını belirtir.

col ile col-12 arasındaki fark nedir?

.col kalan alanı kardeşleriyle eşit paylaşır (flex: 1 0 0%), .col-12 ise her zaman satırın tamamını (width: 100%) kaplar. Tek başına kaldıklarında ikisi de tam genişlikte görünür; fark, satıra ikinci bir sütun eklediğinizde ortaya çıkar.

Sütun genişliklerini satır içinden mi, sütun üzerinden mi vermeliyim?

Tüm sütunlar aynı genişlikteyse .row-cols-* daha az sınıf yazdırır. Sütunlar farklı genişlikteyse her sütuna kendi .col-* sınıfını verin. İkisi birlikte de kullanılabilir; sütun üzerindeki sınıf satırdaki varsayılanı ezer.

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 · Sütun hizalama, order ve offset · Gutter sınıfları · Container ve container-fluid · Breakpoint ve responsive kademeler · CSS flexbox rehberi