Bootstrap 5 Dersleri: Grid system(Izgara sistemi) – Ders 4

Yazar

9 Ocak 2021

1094

On iki sütun sistemi, altı varsayılan duyarlı katman, Sass değişkenleri ve karışımları ve düzinelerce önceden tanımlanmış sınıf sayesinde tüm şekil ve boyutlarda düzenler oluşturmak için güçlü mobil öncelikli bootstrap 5 esnek kutu ızgarası sisteminin eğitimine hoş geldiniz. 🙂

Bootstrap’in grid (ızgara) sistemi, içeriği düzenlemek ve hizalamak için kapsayıcı(containers), satır(row) ve sütun(container) kullanır. Flexbox ile oluşturulmuştur ve tamamen duyarlıdır(responsive). Aşağıda, ızgara(grid) sisteminin nasıl bir araya geldiğine dair bir örnek ve ayrıntılı bir açıklama bulunmaktadır.

Aşağıda örnek olarak bir kapsayıcı(container) içerisinde, bir satır(row) içerisinde, 3 adet sütun(column) bulunmakta. Flex yapısına sahip olan bu 3 div otomatik olarak yan yana dizilecektir. Small boyuta(col-sm tanımladığımız için) geçtikten sonra ise burada bulunan 3 div 100% boyuta geçerek alt alta gelecek ve direkt olarak duyarlı(responsive) işlevselliğine sahip olacaktır. (Boyutlar ile ilgili bilgiler aşağıda ızgara seçenekleri olarak verilmiştir.)

Codepen Bootstrap5 Grid System(Izgara Sistemi) örneği için tıkla:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Grid options – Izgara seçenekleri

Bootstrap’in grid(ızgara) sistemi, altı varsayılan breakpoints(kesme noktasının) tümüne ve özelleştirdiğiniz herhangi bir breakpoints(kesme noktasına) uyarlanabilir. Altı varsayılan ızgara katmanı aşağıdaki gibidir:

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

Yukarıda belirtildiği gibi, bu kesme noktalarının her birinin kendi kapsayıcısı(container), benzersiz sınıf öneki ve değiştiricileri vardır. Izgara(grid), bu kesme noktalarında aşağıdaki şekilde değişir:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Auto-layout columns – Otomatik düzen sütunları

Kolay sütun boyutlandırması için kesme noktasına(breakpoint) özgü sütun sınıflarını kullanın “.col-sm-6“.

Equal-width – Eşit genişlik

Burada her cihaz ve görünüm penceresi için geçerli olan iki grid(ızgara) düzeni bulunmaktadır, xs boyuttan xxl boyutuna kadar her kırılımda aynı ölçülere sahip divler bulunmaktadır. İhtiyacınız olan her kesme noktası için istediğiniz sayıda birimsiz(col-sm-, col-md-, col-lg- vb.) sınıf ekleyin ve her sütun aynı genişlikte olacaktır.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Setting one column width – Bir sütun genişliğini ayarlama

Flexbox ızgara(grid) sütunları(columns) için otomatik mizanpaj(sayfa düzeni) aynı zamanda bir sütunun genişliğini(column width) ayarlayabileceğiniz ve kardeş sütunların çevresinde otomatik olarak yeniden boyutlandırılabileceği anlamına gelir. Önceden tanımlanmış grid(ızgara) sınıflarını(aşağıda gösterildiği gibi), grid(ızgara) karışımlarını veya satır içi genişliklerini kullanabilirsiniz. Diğer sütunların, merkez sütunun genişliği ne olursa olsun yeniden boyutlandırılacağını unutmayın.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content – İçeriğe Göre Genişlik

Sütunları içeriklerinin doğal genişliğine göre boyutlandırmak için col-{breakpoint}-auto sınıfları kullanabiliriz. Aşağıdaki örneğe bakacak olursak col-{breakpoint}-auto şeklinde tanımladığımız alanlar içeriğin genişliğine göre yer kapsamaktadır.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Responsive classes – Duyarlı sınıflar

Bootstrap’in grid(ızgarası), karmaşık duyarlı düzenler oluşturmak için önceden tanımlanmış altı sınıf içerir. Sütunlarınızın boyutunu, uygun gördüğünüz şekilde ekstra küçük, küçük, orta, büyük veya çok büyük cihazlarda özelleştirin.

All breakpoints – Tüm kesme noktaları

Tüm kesme noktalarında aynı olmasını istiyorsanız col class tanımlamasını yapabilirsiniz. Aynı zamanda bu kırılım noktalarında boyutlandırma yapmak istiyorsanız numaralandırma kullanabilirsiniz. Örn: col-8

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Stacked to horizontal – Yatay olarak yığılmış

Kesme noktalarında resonsive yapıya sahip olup sütunların alt alta gelmesini istiyorsak kesme noktasını tanımlamamız yeterli olacaktır. Örnek olarak col-sm veye col-sm-8 dediğimizde small boyuta geldiği zaman sütunlar alt alta geçecektir.

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mix and match – Karıştır ve Eşleştir

Sütunlarınızın gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanmak isteyebilirsiniz. Nasıl çalıştığına dair daha iyi bir fikir için aşağıdaki örneğe bakın.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Row columns – Satır sütunları

İçeriğinizi ve düzeninizi en iyi şekilde işleyen sütun sayısını hızlı bir şekilde ayarlamak için .row-cols-* duyarlı sınıfları kullanın. Normal .col-* sınıflar tek tek sütunlar için geçerliyken (örneğin .col-md-4), satır sütun sınıfları üst öğe üzerinde .row kısayol olarak ayarlanır..row-cols-auto ile sütunlara doğal genişliklerini verebilirsiniz.

Hızlı bir şekilde temel ızgara düzenleri oluşturmak veya kart düzenlerinizi kontrol etmek için bu satır sütun sınıflarını kullanın. Detaylı bilgi için aşağıdaki örnekleri inceleyiniz.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>


<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ayrıca birlikte verilen Sass karışımını da kullanabilirsiniz row-cols()

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Nesting – İç içe kullanım

İçeriğinizi varsayılan ızgarayla iç içe yerleştirmek için mevcut bir sütunun içine yeni .row ve bir dizi .col-sm-* sütun ekleyin .col-sm-*. İç içe geçmiş satırların toplamı 12 veya daha az olan bir dizi sütun içermelidir (mevcut 12 sütunun tümünü kullanmanız gerekmez). Kısaca oluşturduğum sütunlar içerisinde tekrar satır ve sütun oluşturarak iç içe bir kullanım yapabiliriz. Detaylı bilgi için örneği inceleyiniz.

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>