Skip to main content

Сітка / Розмітка сітки

Навігація

Сітка

Techno4 постачається з гнучкою сіткою макета, яка дозволяє розміщувати вміст так, як вам потрібно.

Розмітка сітки 

<!-- Кожний рядок клітинок має бути обгорнутий div class="row" -->
<div class="row">
    <!-- Кожна «комірка» має клас col-[ширина у відсотках].-->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<div class="row">
    <!-- Кожна «комірка» має клас col-[ширина у відсотках]. -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>
За замовчуванням усі «комірки» мають проміжок 15 пікселів між собою для теми iOS і 16 пікселів для теми MD. Якщо вам потрібні «клітинки» без проміжків, вам слід додати додатковий клас без прогалин non-gap до "row":
<!-- Додатковий клас "без проміжків" у рядку для видалення простору між клітинками-->
<div class="row no-gap">
    <!-- Кожна «комірка» має клас col-[ширина у відсотках]. -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<div class="row">
    <!-- Кожна «комірка» має клас col-[ширина у відсотках]. -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

Розміри стовпців

Доступні такі розміри стовпців:

Class

xsmall

width >= 480px

small

width >= 568px

medium

width >= 768px

large

width >= 1024px

xlarge

width >= 1200px
grid-cols-1
xsmall-grid-cols-1
small-grid-cols-1
medium-grid-cols-1
large-grid-cols-1
xlarge-grid-cols-1
grid-cols-2
xsmall-grid-cols-2
small-grid-cols-2
medium-grid-cols-2
large-grid-cols-2
xlarge-grid-cols-2
grid-cols-3
xsmall-grid-cols-3
small-grid-cols-3
medium-grid-cols-3
large-grid-cols-3
xlarge-grid-cols-3
grid-cols-4
xsmall-grid-cols-4
small-grid-cols-4
medium-grid-cols-4
large-grid-cols-4
xlarge-grid-cols-4
grid-cols-5
xsmall-grid-cols-5
small-grid-cols-5
medium-grid-cols-5
large-grid-cols-5
xlarge-grid-cols-5
grid-cols-6
xsmall-grid-cols-6
small-grid-cols-6
medium-grid-cols-6
large-grid-cols-6
xlarge-grid-cols-6
grid-cols-7
xsmall-grid-cols-7
small-grid-cols-7
medium-grid-cols-7
large-grid-cols-7
xlarge-grid-cols-7
grid-cols-8
xsmall-grid-cols-8
small-grid-cols-8
medium-grid-cols-8
large-grid-cols-8
xlarge-grid-cols-8
grid-cols-9
xsmall-grid-cols-9
small-grid-cols-9
medium-grid-cols-9
large-grid-cols-9
xlarge-grid-cols-9
grid-cols-10
xsmall-grid-cols-10
small-grid-cols-10
medium-grid-cols-10
large-grid-cols-10
xlarge-grid-cols-10
grid-cols-11
xsmall-grid-cols-11
small-grid-cols-11
medium-grid-cols-11
large-grid-cols-11
xlarge-grid-cols-11
grid-cols-12
xsmall-grid-cols-12
small-grid-cols-12
medium-grid-cols-12
large-grid-cols-12
xlarge-grid-cols-12
grid-cols-13
xsmall-grid-cols-13
small-grid-cols-13
medium-grid-cols-13
large-grid-cols-13
xlarge-grid-cols-13
grid-cols-14
xsmall-grid-cols-14
small-grid-cols-14
medium-grid-cols-14
large-grid-cols-14
xlarge-grid-cols-14
grid-cols-15
xsmall-grid-cols-15
small-grid-cols-15
medium-grid-cols-15
large-grid-cols-15
xlarge-grid-cols-15
grid-cols-16
xsmall-grid-cols-16
small-grid-cols-16
medium-grid-cols-16
large-grid-cols-16
xlarge-grid-cols-16
grid-cols-17
xsmall-grid-cols-17
small-grid-cols-17
medium-grid-cols-17
large-grid-cols-17
xlarge-grid-cols-17
grid-cols-18
xsmall-grid-cols-18
small-grid-cols-18
medium-grid-cols-18
large-grid-cols-18
xlarge-grid-cols-18
grid-cols-19
xsmall-grid-cols-19
small-grid-cols-19
medium-grid-cols-19
large-grid-cols-19
xlarge-grid-cols-19
grid-cols-20
xsmall-grid-cols-20
small-grid-cols-20
medium-grid-cols-20
large-grid-cols-20
xlarge-grid-cols-20

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-grid-gap: 16px;
}

Приклади 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Grid / Layout</div>
    </div>
  </div>
  <div class="page-content grid-demo">
    <div class="block">
      <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with
        pourcentage of screen you want.</p>
    </div>
    <div class="block-title">Columns with gap</div>
    <div class="block">
      <div class="grid grid-cols-2 grid-gap">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4 grid-gap">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3 grid-gap">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5 grid-gap">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
      </div>
    </div>
    <div class="block-title">No gap between columns</div>
    <div class="block">
      <div class="grid grid-cols-2">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
      </div>
    </div>

    <div class="block-title">Responsive Grid</div>
    <div class="block">
      <p>Grid cells have different size on Phone/Tablet</p>
      <div class="grid grid-cols-1 medium-grid-cols-2 grid-gap">
        <div>1 col / medium 2 cols</div>
        <div>1 col / medium 2 cols</div>
      </div>
      <div class="grid grid-cols-2 medium-grid-cols-4 grid-gap">
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
      </div>
    </div>

  </div>
</div>

Techno4 Framework