Izgara

Gralig flexbox tabanlı çok basit bir ızgara(grid) sistemi kullanır. .row kapsayıcısı içinde istediğiniz kadar .col kullanabilirsiniz, ancak aşağıdaki sütun boyutlarını kullanmanızı öneririz.

Aşağıdaki görünümler örnek olarak hazırlanmıştır ve normal kullanımda gözükmeyecektir.

Sütunlar

col

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

Sütun Boyutları

col-10

col-16

col-20

col-25

col-30

col-33

col-40

col-50

col-60

col-67

col-70

col-75

col-80

col-84

col-90

col-100

<div class="container">
  <div class="row">
    <div class="col col-10">col-10</div>
  </div>
  <div class="row">
    <div class="col col-16">col-16</div>
  </div>
  <div class="row">
    <div class="col col-20">col-20</div>
  </div>
  <div class="row">
    <div class="col col-25">col-25</div>
  </div>
  <div class="row">
    <div class="col col-30">col-30</div>
  </div>
  <div class="row">
    <div class="col col-33">col-33</div>
  </div>
  <div class="row">
    <div class="col col-40">col-40</div>
  </div>
  <div class="row">
    <div class="col col-50">col-50</div>
  </div>
  <div class="row">
    <div class="col col-60">col-60</div>
  </div>
  <div class="row">
    <div class="col col-67">col-67</div>
  </div>
  <div class="row">
    <div class="col col-70">col-70</div>
  </div>
  <div class="row">
    <div class="col col-75">col-75</div>
  </div>
  <div class="row">
    <div class="col col-80">col-80</div>
  </div>
  <div class="row">
    <div class="col col-84">col-84</div>
  </div>
  <div class="row">
    <div class="col col-90">col-90</div>
  </div>
  <div class="row">
    <div class="col">col-100</div>
  </div>
</div>

Kaydırma Boşlukları

Sütunları soldan belirli boşluklarda kaydırmak için aşağıdaki gibi .col-span-* kullanabilirsiniz.

col-10col-span-90

col-16col-span-84

col-20col-span-80

col-25col-span-75

col-30col-span-70

col-33col-span-67

col-40col-span-60

col-50col-span-50

col-60col-span-40

col-67col-span-33

col-70col-span-30

col-75col-span-25

col-80col-span-20

col-84col-span-16

col-90 col-span-10

<div class="container">
  <div class="row">
    <div class="col col-10 col-span-90">col-10</div>
  </div>
  <div class="row">
    <div class="col col-16 col-span-84">col-16</div>
  </div>
  <div class="row">
    <div class="col col-20 col-span-80">col-20</div>
  </div>
  <div class="row">
    <div class="col col-25 col-span-75">col-25</div>
  </div>
  <div class="row">
    <div class="col col-30 col-span-70">col-30</div>
  </div>
  <div class="row">
    <div class="col col-33 col-span-67">col-33</div>
  </div>
  <div class="row">
    <div class="col col-40 col-span-60">col-40</div>
  </div>
  <div class="row">
    <div class="col col-50 col-span-50">col-50</div>
  </div>
  <div class="row">
    <div class="col col-60 col-span-40">col-60</div>
  </div>
  <div class="row">
    <div class="col col-67 col-span-33">col-67</div>
  </div>
  <div class="row">
    <div class="col col-70 col-span-30">col-70</div>
  </div>
  <div class="row">
    <div class="col col-75 col-span-25">col-75</div>
  </div>
  <div class="row">
    <div class="col col-80 col-span-20">col-80</div>
  </div>
  <div class="row">
    <div class="col col-84 col-span-16">col-84</div>
  </div>
  <div class="row">
    <div class="col col-90 col-span-10">col-90</div>
  </div>
</div>

Sütunların Mobilde Kullanımı

Sütunlar normal kullanımda mobil kırılımına geldiğinde kapsayıcısının %100 genişliğini alır. .row-mobile kullanarak bunu engelleyebilir ve mobilde sütun genişliklerini koruyabilirsiniz.

col

<!-- .row-mobile kullanarak sütunların mobilde %100 genişlemesini engelleyebilirsiniz -->

<div class="container">
  <div class="row row-mobile">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>