Web tasarımı öğrenme serüvenimizde, sitenizin iskeletini oluşturacak en hayati konuya geldik: Bootstrap Grid (Izgara) Sistemi. Önceki içeriğimizde sayfamızın ana çerçevesini oluşturan “Container” yapısını öğrenmiştik. Şimdi ise bu çerçevenin içini nasıl düzenli, orantılı ve her ekrana uyumlu (responsive) hale getireceğimizi inceleyeceğiz.
Kusursuz görünen modern web sitelerinin sırrı, içeriklerin sayfa üzerine rastgele değil, belirli bir matematiksel düzene göre yerleştirilmesidir. İşte Bootstrap’in grid sistemi, tam olarak bu matematiksel düzeni kurmanızı sağlayan dünyanın en popüler ve güçlü yerleşim aracıdır.
Peki, bu sistem nasıl çalışır ve ilk defa kod yazacak biri bunu projelerine nasıl entegre edebilir? Gelin, konuyu temelden alarak bol örnekle pekiştirelim.
Bootstrap Grid Sistemi Nedir ve Nasıl Çalışır?
Bootstrap 5 grid sistemi, mobil öncelikli (mobile-first) bir yaklaşımla inşa edilmiş, gücünü modern CSS Flexbox teknolojisinden alan esnek bir sayfa yerleşim sistemidir. En basit tabirle, web sayfanızı yatay ve dikey çizgilerle bölünmüş görünmez bir tablo gibi düşünmenizi sağlar.
Sistem, üç temel yapı taşının birbiriyle uyum içinde çalışmasıyla var olur:
- Container (Kapsayıcı): Tüm içeriği ortalayan ve yatay boşluklarını ayarlayan en dış kutudur. Grid sisteminin düzgün çalışması için mutlak suretle bir container içine alınması zorunludur.
- Row (Satır): Sütunları (columns) sarmalayan yatay gruplardır. Temel amacı, içindeki sütunların yan yana ve hizalı durmasını sağlamaktır.
- Column (Sütun): İçeriklerinizi (metinler, görseller, formlar vb.) içine yerleştirdiğiniz asıl alanlardır. Bootstrap’in altın kuralı şudur: İçerikler daima sütunların içine yerleştirilmelidir ve sütunlar da daima satırların (row) doğrudan alt çocukları (immediate children) olmak zorundadır.
Ekran Kırılma Noktaları (Breakpoints) Nelerdir?
Farklı ekran boyutlarına sahip cihazlarda (cep telefonu, tablet, laptop, dev ekranlı masaüstü) sitenizin nasıl görüneceğini kontrol etmek için Bootstrap “kırılma noktaları” kullanır. Sistemin mobil öncelikli (mobile-first) olması şu anlama gelir: Belirttiğiniz bir kural, o ekran boyutunda başlar ve daha büyük tüm ekranlarda geçerli olmaya devam eder.
Bootstrap 5, altı (6) farklı ekran kırılma noktası sunar:
- xs (Extra small): 576px’ten küçük ekranlar (Akıllı telefonlar – Sınıf ön eki:
.col-) - sm (Small): 576px ve üzeri ekranlar (Büyük telefonlar – Sınıf ön eki:
.col-sm-) - md (Medium): 768px ve üzeri ekranlar (Tabletler – Sınıf ön eki:
.col-md-) - lg (Large): 992px ve üzeri ekranlar (Dizüstü bilgisayarlar – Sınıf ön eki:
.col-lg-) - xl (Extra large): 1200px ve üzeri ekranlar (Masaüstü bilgisayarlar – Sınıf ön eki:
.col-xl-) - xxl (Extra extra large): 1400px ve üzeri ekranlar (Geniş monitörler – Sınıf ön eki:
.col-xxl-). (Bu boyut Bootstrap 5 ile birlikte sisteme eklenen yeni bir özelliktir)
Altın Kural: 12 Sütun Mantığı
Bootstrap’in grid sistemi her bir satırı (row) yatayda toplam 12 eşit parçaya böler. 12 rakamının seçilmesinin sebebi harika bir bölünebilirliğe sahip olmasıdır (1, 2, 3, 4, 6 ve 12’ye tam bölünür). Sitenizdeki bir içeriğin ne kadar yer kaplayacağını, bu 12 parçadan kaçını kullanacağını belirterek seçersiniz.
Örneğin, ekranın tam yarısını kaplayan bir alan istiyorsanız 6 birim (.col-6), üçte birini kaplamasını istiyorsanız 4 birim (.col-4) yazarsınız. Satır içindeki sütunların toplamı her zaman 12’yi vermelidir. Eğer 12’yi aşarsanız, sığmayan sütun otomatik olarak bir alt satıra geçer (wrap).
Pratik Örneklerle Grid Kullanımı
Bu teorik bilgileri ilk defa öğrenen biri için pratikte nasıl yazıldığını görmek en iyi öğrenme yöntemidir.
Örnek 1: Otomatik Hizalanan (Eşit Genişlikli) Sütunlar Eğer yan yana duracak kutularınızın eşit genişlikte olmasını istiyorsanız, rakam belirtmenize gerek yoktur. Flexbox yapısı sayesinde sadece .col sınıfını kullanırsanız, Bootstrap boşluğu otomatik olarak eşit şekilde böler.
<div class="container">
<div class="row">
<div class="col">1. Eşit Kutu (Ekranın 1/3'ü)</div>
<div class="col">2. Eşit Kutu (Ekranın 1/3'ü)</div>
<div class="col">3. Eşit Kutu (Ekranın 1/3'ü)</div>
</div>
</div>
Örnek 2: Farklı Genişliklere Sahip Sütunlar Sol tarafta dar bir menü (3 birim), sağ tarafta geniş bir içerik alanı (9 birim) istediğinizi varsayalım. Matematik basittir: 3 + 9 = 12.
<div class="container">
<div class="row">
<div class="col-md-3">Sol Menü Alanı (3 Birim)</div>
<div class="col-md-9">Ana İçerik Alanı (9 Birim)</div>
</div>
</div>
Yukarıdaki örnekte md kullandığımız için, tablet ve daha büyük ekranlarda yan yana dururlar. Ekran boyutu 768px’in (tablet) altına düştüğünde mobil öncelikli yapı sayesinde otomatik olarak alt alta geçerek muazzam bir mobil uyumluluk sağlarlar.
Örnek 3: Farklı Cihazlara Göre Karma (Mix and Match) Düzen Profesyonel ve SEO dostu bir web sitesi, her cihazda kullanıcı deneyimini (UX) üst düzeyde tutmalıdır. Bir satırdaki içeriklerin mobilde tam ekran, tablette yarı yarıya, masaüstünde ise üçlü olarak dizilmesini şöyle sağlarız:
<div class="container">
<div class="row">
<!-- Mobilde 12 (tam ekran), tablette 6 (yarım), masaüstünde 4 (üçte bir) -->
<div class="col-12 col-md-6 col-lg-4">Ürün 1</div>
<div class="col-12 col-md-6 col-lg-4">Ürün 2</div>
<div class="col-12 col-md-6 col-lg-4">Ürün 3</div>
</div>
</div>
Bu sayede medya sorguları (media queries) yazarak sayfalarca CSS kodu oluşturma zahmetinden tamamen kurtulmuş olursunuz.
Gutter (Boşluk) Yönetimi
Sütunların birbirine yapışık olmaması için aralarında varsayılan olarak bırakılan boşluklara Gutter denir. Bootstrap 5 ile birlikte “Gutter” yönetiminde devrim niteliğinde bir yeniliğe gidilmiş ve px (piksel) cinsinden olan ölçüler rem cinsine geçirilmiştir.
Ayrıca sütunların arasındaki bu boşlukları doğrudan HTML üzerinden kontrol etmeniz için harika sınıflar (classes) eklenmiştir:
.gx-*: Sadece yatay (horizontal) boşlukları kontrol eder..gy-*: Sadece dikey (vertical) boşlukları kontrol eder..g-*: Hem yatay hem de dikey boşlukları aynı anda kontrol eder..g-0: Eğer görsellerin veya kutuların arasında hiçbir boşluk kalmamasını, uçtan uca yapışmasını istiyorsanız.g-0sınıfını.rowüzerine eklemeniz yeterlidir (Eski sürümdeki.no-gutterssınıfının yerini almıştır).
<div class="container">
<!-- Sütunlar arasında 4 birimlik yatay ve dikey boşluk bırakır -->
<div class="row g-4">
<div class="col-6">Kutu 1</div>
<div class="col-6">Kutu 2</div>
</div>
</div>
İç İçe (Nesting) Grid Sistemi Kullanımı
Gerçek dünya projelerinde, oluşturduğunuz bir sütunun içini de kendi içinde bölümlere ayırmanız gerekebilir. Bootstrap grid sistemi buna sorunsuzca izin verir. Var olan bir .col etiketinin içine yeni bir .row açtığınızda, o row’un içi tamamen kendine ait yepyeni bir 12 birimlik sisteme dönüşür.
<div class="container">
<div class="row">
<div class="col-sm-8">
Dış Sütun (8 Birimlik Ana Alan)
<!-- Ana alanın içine yeni bir satır açıyoruz -->
<div class="row">
<!-- Bu yeni satırın kendi 12 birimi vardır -->
<div class="col-sm-6">İç Sütun 1</div>
<div class="col-sm-6">İç Sütun 2</div>
</div>
</div>
<div class="col-sm-4">Sağ Kenar Çubuğu (4 Birim)</div>
</div>
</div>
Yenilik Arayanlar İçin: CSS Grid (Deneysel)
Her ne kadar Bootstrap varsayılan olarak gücünü “Flexbox” teknolojisinden alsa da, web teknolojileri sürekli gelişmektedir. Bootstrap 5.1 sürümüyle birlikte standart ızgara sistemine alternatif olarak CSS Grid altyapısı sisteme deneysel (opt-in) olarak dahil edilmiştir.
Eğer projelerinizde varsayılan sistemi devreden çıkarıp bu modern altyapıyı Sass (SCSS) üzerinden etkinleştirirseniz ( $enable-cssgrid: true ile); .row sınıfı yerine .grid sınıfını, .col-* sınıfları yerine ise .g-col-* sınıflarını kullanmaya başlarsınız. CSS Grid, çok daha karmaşık yatay ve dikey (iki boyutlu) tasarımlar için geliştiricilere büyük bir ufuk açmaktadır.
Özetle
Bootstrap Grid Sistemi; modern, hızlı ve SEO dostu bir web sitesinin can damarıdır. Arama motorları sitenizin mobilde nasıl göründüğüne büyük önem verir (Mobile-first indexing). Bootstrap’in 12 sütunlu bu kusursuz matematiksel altyapısını kavradığınızda, hiçbir ekstra CSS kodu yazmadan hayalinizdeki tüm web sayfalarını inşa edebilir, her cihaza mükemmel uyum sağlayan tasarımlara imza atabilirsiniz. Şimdi bir .container oluşturun, içine .row ekleyin ve .col sınıfları ile web geliştirme dünyasının tadını çıkarın!
