Верхний блок над шапкой
 
+7 (495) 021-98-78
заказать звонок
Вакансии

Колоночная верстка

Категории: 
верстка
13:50 - 15.02.2018
Базовые классы

.row

строка для создания горизонтальных групп колонок

.col

колонка. Только колонки могут быть непосредственными потомками строк. Колонки создаются с указанием количества двенадцати доступных столбцов

.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12

для всех устройств, добавляется к колонкам .col

.t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9, .t10, .t11, .t12

для устройств, шириной экрана от 959px и менее

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10, .m11, .m12

для устройств, шириной экрана от 640px и менее

Пример:
<div class="row">
  <div class="col d4 t6 m12">.col .d4 .t6 .m12</div>
  <div class="col d4 t6 m12">.col .d4 .t6 .m12</div>
  <div class="col d4 t12">.col .d4 .t12</div>
</div>
.col .d4 .t6 .m12
.col .d4 .t6 .m12
.col .d4 .t12
Дополнительные классы (добавляются к строке .row)

.inline

запрещает перенос колонок внутри .row, колонки будут всегда выстроены в одну строку

.table

на устройствах, с шириной экрана более 959px, строка сетки будет вести себя, как таблица. При этом колонки .col ведут себя как ячейки таблицы, и не обязательно указывать классы, задающие количество столбцов в колонке, такие как .d6, .d8 и т.д.

.top, .middle, .bottom

устанавливает вертикальное выравнивание колонок внутри .row, по умолчанию колонки выровнены по верхнему краю

.sp-5, .sp-10, .sp-15, .sp-20, .sp-30, .sp-40, .sp-50, .sp-60, .sp-70, .sp-80, .sp-90, .sp-100

добавляет горизонтальные отступы колонкам 5px, 10px и т.д. соответственно. При этом строке .row добавляются отрицательные поля, нужно учитывать, что у одной из ее оберток родителей должны быть необходимые отступы. На устройствах, с шириной экрана 959px и менее, у классов sp-20 - sp-100 отступы равны 15px

.h10, .h20, .h30, .h40, .h50, .h60, .h70, .h80, .h90, .h100, .h150, .h200, .h250, .h300, .h350, .h400, .h450, .h500, .h600, .h700, .h800, .h900, .h1000

устанавливает высоту .row и .col равной 10px, 20px и т.д. соответственно. При этом надо учитывать, что, при переносе колонки на вторую строку, высота контейнера .row не изменится

.hp100

устанавливает высоту .row и .col равной 100%

.biggest, .bigger, .big, .small, .smaller, .smallest, .micro

управляет размером шрифта элементов внутри колонок

Примеры:
<div class="row table small">
  <div class="col t3 m6">
    <div>.col .t3 .m6</div>
  </div>
  <div class="col t3 m6">
    <div>.col .t3 .m6</div>
  </div>
  <div class="col t6 m12">
    <div>.col .t6 .m12</div>
  </div>
</div>
.col .t3 .m6
.col .t3 .m6
.col .t6 .m12
<div class="row middle sp-10">
  <div class="col d3 t4 m6">.col .d3 .t4 .m6</div>
  <div class="col d3 t4 m6">.col .d3 .t4 .m6 <br> cols vertical align middle for example.</div>
  <div class="col d3 t4 m12">.col .d3 .t4 .m12</div>
  <div class="col d3 t12">.col .d3 .t12</div>
</div>
.col .d3 .t4 .m6
.col .d3 .t4 .m6
cols vertical align middle for example.
.col .d3 .t4 .m12
.col .d3 .t12
<div class="row sp-10 h100">
  <div class="col d6">.col .d6</div>
  <div class="col d6">.col .d6</div>
</div>
.col .d6
.col .d6
Компания