Izgara Sistemi

Flexbox'ta yeni misiniz veya aşina değil misiniz? Arka plan, terminoloji, yönergeler ve kod parçacıkları için CSS Püf Noktaları esnek kutu kılavuzu göz atabilirsiniz.

Column

html

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Yukarıdaki örnek, önceden tanımlanmış ızgara sınıflarımızı kullanarak tüm cihazlarda ve görünüm pencerelerinde eşit genişlikte üç sütun oluşturur.

container#

Duyarlı piksel genişliği için .container.

container-fluid#

Full genişlik için .container-fluid: tüm görünüm alanları ve cihazlarda %100 genişliği kapsayacak şekilde ayarlar.

Izgara seçenekleri#

v5 ızgara sistemi, beş varsayılan kesme noktasının tümüne ve özelleştirdiğiniz kesme noktalarına uyum sağlayabilir. Beş varsayılan ızgara katmanı aşağıdaki gibidir:

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 konteyneri, benzersiz sınıf öneki ve değiştiricileri vardır. Bu kesme noktalarında nasıl değiştiği aşağıdaki tabloda açıklanmıştır.

		sm≥576px	md≥768px	lg≥992px	xl≥1170px	xxl≥1400px
Container `max-width`	None (auto)	560px	738px	962px	1140px	1370px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	md≥30px (15px on left and right) \| md<16px (8px on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Otomatik mizanpaj sütunları#

col-sm-6, col-md-4 gibi değerler olmadan esnek yapı ile kesme noktasına özgü sütun sınıflarını kullanın.

Eşit genişlik#

1 / 2

2 / 2

1 / 3

2 / 3

3 / 3

html

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

Bir sütun genişliğini ayarlama#

Flexbox ızgara sütunları için otomatik yerleşim, bir sütunun genişliğini ayarlayabileceğiniz ve diğer sütunların ölçüsünü otomatik olarak yeniden boyutlandırılmasını sağlayabileceğiniz anlamına gelir.

1 / 3

2 / 3 (daha geniş)

3 / 3

1 / 3

2 / 3 (daha geniş)

3 / 3

html

<div class="container">
  <div class="row">
    <div class="col">
      1 / 3
    </div>
    <div class="col-6">
      2 / 3 (daha geniş)
    </div>
    <div class="col">
      3 / 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 / 3
    </div>
    <div class="col-5">
      2 / 3 (daha geniş)
    </div>
    <div class="col">
      3 / 3
    </div>
  </div>
</div>

Dinamik içerik genişliği#

Sütunları içerik genişliğine göre boyutlandırmak için col-{breakpoint}-auto sınıflarını kullanın.

1 / 3

İçeriğe göre genişlik

3 / 3

1 / 3

İçeriğe göre genişlik

3 / 3

html

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-2">
      1 / 3
    </div>
    <div class="col-md-auto">
      İçeriğe göre genişlik
    </div>
    <div class="col-lg-2">
      3 / 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 / 3
    </div>
    <div class="col-md-auto">
      İçeriğe göre genişlik
    </div>
    <div class="col-lg-2">
      3 / 3
    </div>
  </div>
</div>

Duyarlı sınıflar (Responsive)#

v5'in ızgarası, karmaşık ve duyarlı düzenler oluşturmak için beş katman ile önceden tanımlanmış sınıf içerir. Sütunlarınızın boyutunu küçük, orta, büyük veya çok büyük ekran çözünürlüğüne sahip cihazlarda uygun gördüğünüz şekilde özelleştirmenize imkan tanır.

Kırılım ölçüleri#

En küçüğünden en büyüğüne kadar aynı olan ızgaralar için .col ve .col-* sınıflarını kullanın. Özellikle boyutlandırılmış bir sütuna ihtiyacınız olduğunda numaralı bir sınıf belirtin; aksi takdirde, .col'a bağlı kalmaktan çekinmeyin.

col

col 8

col 4

html

<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>

Alt kırılım noktası#

Tek bir .col-sm-* sınıfı kümesi kullanarak, üst kırılımları belirleme.

col-8

col-4

col-sm-auto

html

<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-auto">col-sm-auto</div>
    <div class="col-sm-auto">col-sm-auto</div>
    <div class="col-sm-auto">col-sm-auto</div>
  </div>
</div>

Karışık kullanım#

Gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanabilirsiniz. v5'in grid yapısının nasıl çalıştığına dair daha iyi bir fikir için aşağıdaki örneğe bakın.

.col-md-8 .col-lg-6

.col-md-4 .col-lg-6

.col-sm-6 .col-md-4

.col-6

html

<div class="container">
  <!-- Geniş ekranda bir sutün geniş diğeri küçük, mobilde 50% - 50% şekilde ayarlayın -->
  <div class="row">
    <div class="col-md-8 col-lg-6">.col-md-8 .col-lg-6</div>
    <div class="col-md-8 col-lg-6">.col-md-8 .col-lg-6</div>
  </div>

  <!-- Sütunlar mobilde %50 genişlikte başlar ve masaüstünde %33,3'e kadar genişler -->
  <div class="row">
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
  </div>

  <!-- Sütunlar mobilde ve masaüstünde her zaman %50 genişliğinde -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

İç içe kullanım (Nesting)#

İçeriğinizi varsayılan kılavuzla iç içe yerleştirmek için, mevcut bir .col-sm- sütununa yeni bir .row ve .col-sm- sütunları kümesi ekleyin. İç içe satırlar, toplam 12 veya daha az sütun içeren bir dizi sütun içermelidir.

Mevcut 12 sütunun tümünü kullanmanız gerekmez

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

html

<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>

Değişkenler#

default.scss

/* Grid */
$gridColumns: 12;
$gridPadding: 15px;
$mobileGridPadding: 8px;

/* Breakpoints */
$xxlScreen: 1400px;
$xlScreen: 1170px;
$lgScreen: 992px;
$mdScreen: 768px;
$smScreen: 576px;