Bootstrap Grid Sistemi Nedir? Container, Row ve Col Mantığı

Bootstrap grid sistemi, sayfayı 12 sütunluk esnek bir ızgaraya bölerek içeriği ekran genişliğine göre yerleştiren düzen yapısıdır. Mantık üç katmandan oluşur: container dış çerçeveyi, row yatay satırı, col ise satırın içindeki sütunları belirler. Hangi sütunun hangi ekranda kaç birim yer kaplayacağını da breakpoint'lere bağlı sınıflarla söylersiniz.

Grid sistemi neden var?

Responsive tasarım yaygınlaşmadan önce sayfa düzenleri sabit piksel genişlikleri ve "float" hileleriyle kurulurdu; her yeni ekran boyutu yeni bir sorun demekti. Bootstrap'in ızgarası bu işi standart bir sınıf diline çevirdi. Bootstrap 4 ile flexbox tabanına geçen grid, Bootstrap 5'te jQuery bağımlılığının da kaldırılmasıyla hafif ve öngörülebilir bir araca dönüştü.

Kürekod olarak 2016–2018 arasında reklam ajanslarına yaptığımız PSD to Bootstrap işlerinin temelinde bu ızgara vardı. Tasarımcının çizdiği düzeni sütunlara bölmek, kodlamaya başlamadan önce yaptığımız ilk işti. Konunun tasarımdan koda tarafını PSD to HTML nedir yazımızda anlattık.

Aşağıda container, gutter, breakpoint gibi kavramlar sık geçecek. Bunlar size yabancıysa Digital Küre'nin bilmeniz gereken web tasarım terimlerini derleyen yazısı hızlı bir başlangıç sağlar.

Container, row ve col: üç katman

Container

Container, içeriği yatayda ortalayan ve kenarlarda boşluk bırakan dış kaptır. Üç türü vardır: .container her breakpoint'te belirli bir en fazla genişliğe sabitlenir; .container-fluid her zaman ekranın tamamını kaplar; .container-md gibi sınıflar ise belirtilen breakpoint'e kadar tam genişlikte kalır, oradan sonra sabitlenir.

Row

Row, sütunları yan yana dizen flex kapsayıcısıdır. Sütunlar arasındaki boşluğu (gutter) dengelemek için kenarlarında negatif boşluk bulunur; bu yüzden row her zaman bir container ya da bir sütunun içinde kullanılmalıdır. Sütunlar da row'un doğrudan alt öğesi olmalıdır.

Col

Col, içeriğin yerleştiği sütundur. Bir satırda toplam 12 birim vardır: .col-6 yarım genişlik, .col-4 üçte bir, .col-3 dörtte bir demektir. Sayı verilmeden kullanılan .col kalan alanı diğer sütunlarla eşit paylaşır; .col-auto ise içeriği kadar yer kaplar.

Üç kartlık tipik bir hizmet bölümü şöyle kurulur:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Kart 1</div>
    <div class="col-12 col-md-6 col-lg-4">Kart 2</div>
    <div class="col-12 col-lg-4">Kart 3</div>
  </div>
</div>

Bu kodda kartlar telefonda alt alta dizilir, tablette ikişerli, geniş ekranda üçü yan yana durur. Üçüncü kartta md sınıfı olmadığı için col-12 tablette de geçerli kalır; kart ikinci satırı tek başına tam genişlikte doldurur ve yarım genişlikte yalnız kalmaz.

Bootstrap 5 breakpoint tablosu

Breakpoint, düzenin değiştiği ekran genişliği eşiğidir. Bootstrap 5'te altı kademe vardır:

Tablodaki en önemli ayrıntı "ve üzeri" ifadesidir. Bootstrap mobil öncelikli (mobile-first) çalışır: .col-md-6 "768 pikselden itibaren yarım genişlik" demektir; daha küçük ekranlarda, başka bir sınıf yoksa sütun tam genişliğe döner. Bu yaklaşım mobil uyumlu web tasarımın temel prensibiyle birebir örtüşür: önce en küçük ekranı düşünür, ekran genişledikçe düzeni zenginleştirirsiniz.

Sık kullanılan grid araçları

• Gutter sınıfları (g-0 … g-5, gx-*, gy-*): Sütunlar arasındaki yatay ve dikey boşluğu ayarlar. Varsayılan boşluk 1.5rem'dir; g-0 boşluğu tamamen kaldırır.
• row-cols-*: Her sütuna ayrı sınıf yazmadan satırdaki sütun sayısını belirler. Ürün ve blog listeleri için idealdir.
• offset-*: Sütunu belirtilen birim kadar sağa kaydırır; ortalanmış dar içerik alanları için kullanışlıdır.
• order-*: Sütunların görünüm sırasını ekrana göre değiştirir; örneğin mobilde görseli metnin altına almak için.
• Hizalama sınıfları: align-items-center, justify-content-between gibi flex sınıfları doğrudan row üzerinde çalışır.

Bir ürün listesi row-cols ile şöyle yazılır:

<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 g-3">
  <div class="col">Ürün</div>
  <div class="col">Ürün</div>
  <div class="col">Ürün</div>
  <div class="col">Ürün</div>
</div>

Telefonda iki, tablette üç, geniş ekranda dört ürün yan yana dizilir. Listeye yeni ürün eklendiğinde hiçbir sınıfı değiştirmeniz gerekmez.

Gutter nasıl çalışır?

Gutter, sütunlar arasındaki boşluktur ve Bootstrap 5'te her sütunun iki yanındaki iç boşlukla (padding) oluşturulur. Row'un kenarlarındaki negatif boşluk, en dıştaki sütunların bu iç boşluğunu dengeler; böylece içerik container'ın kenarıyla hizalı kalır. Bu yüzden bir sütuna kendi CSS'inizle yatay padding verdiğinizde hizalar kayar.

Sütunların içindeki kutuya arka plan rengi ya da kenarlık vermek istiyorsanız, bunu sütunun kendisine değil, içine koyacağınız bir kutuya uygulayın. Aksi halde renk boşluğun içine taşar ve kartlar birbirine yapışık görünür. Yeni başlayanların en sık takıldığı noktalardan biri budur.

Bootstrap grid mi, CSS Grid mi?

Modern tarayıcılar artık CSS Grid'i doğrudan destekliyor, bu yüzden "Bootstrap ızgarasına hâlâ gerek var mı?" sorusu sık soruluyor. Kısa cevap: ikisi farklı işler için güçlü. Bootstrap'in flexbox tabanlı ızgarası sayfa bölümlerini satır satır, ekran genişliğine göre düzenlemekte pratik ve öngörülebilirdir. CSS Grid ise hem satırın hem sütunun aynı anda kontrol edildiği iki boyutlu düzenlerde, örneğin farklı boyutlarda kutulardan oluşan bir galeri ya da yönetim paneli ekranında öne çıkar.

Bootstrap 5.1 ile birlikte Sass ayarlarından açılabilen deneysel bir CSS Grid seçeneği de geldi. Ayrıca yalnızca ızgaraya ihtiyacınız varsa, Bootstrap paketindeki bootstrap-grid.css dosyasını tek başına kullanabilirsiniz; bileşenlerin tamamını yüklemeniz gerekmez.

Sık yapılan hatalar

1. Row'u atlamak: Sütunları doğrudan container içine koymak gutter dengesini bozar, kenar boşlukları kayar.
2. İç içe gridde row'u unutmak: Bir sütunun içinde yeni bir düzen kuracaksanız önce yeni bir row açmalısınız.
3. Toplamı 12'nin üzerine çıkarmak: Bir satırdaki sütunlar 12 birimi aşarsa fazlası alt satıra kayar. Bu bazen istenen bir davranıştır, ama bilinçli olmalı.
4. Her breakpoint'e sınıf yazmak: col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 yazmak yerine col-md-6 yeterlidir; mobil öncelikli mantık gerisini halleder.
5. Her şeyi gridle çözmeye çalışmak: Bir butonun yanındaki ikonu hizalamak için grid değil, d-flex ve gap sınıfları doğru araçtır.
6. Sütuna sabit genişlik vermek: Sütuna CSS ile piksel cinsinden genişlik tanımlamak, ızgaranın esnekliğini ortadan kaldırır.

Grid'i anlamak, tasarımcıyla aynı dili konuşmak demek

Bootstrap grid sistemini bilmek yalnızca geliştiricilerin işi değil. Tasarımcı Figma'da 12 sütunluk bir ızgara kullandığında ya da proje yöneticisi "bu bölüm tablette ikili olsun" dediğinde, herkes aynı yapıdan bahsetmiş olur. Bu ortak dil, revizyon sayısını ve yanlış anlaşılmaları belirgin biçimde azaltır.

Kendi tasarımınızın temiz, Bootstrap tabanlı bir koda dönüştürülmesi gerekiyorsa, bu işte nelere dikkat ettiğimizi tasarımdan koda hizmet sayfamızda anlattık.