Скаффолдинг
Скаффолдинг (от англ. scaffolding — строительные леса) — это оформление контента колонками приблизительно одинаковой высоты. Эта техника относится к адаптивным: при недостаточной ширине экрана (например, на мобильных устройствах) блоки текста автоматически перестраиваются в расположение «друг под другом».
12 ячеек
В основе скаффолдинга лежит предельно простая концепция сетки из 12 ячеек: каждая колонка растягивается по ширине на определенное количество логических ячеек таким образом, чтобы все колонки в пределах одной строки суммарно составляли 12 ячеек.
Это позволяет создавать произвольные схемы расположения колонок, например, «6-6», «4-4-4», «3-3-3-3», «5-7», «6-3-3» и так далее.
Примеры
Для начала приведем несколько примеров. Попробуйте изменить размер окна — при ширине экрана менее 960 пикселей блоки текста перестраиваются в стандартное расположение «друг под другом».
Две колонки одинаковой ширины
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar libero et nibh pretium sit amet lobortis quam malesuada. Mauris est dui, pharetra vitae ultrices.
Две колонки одинаковой ширины
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar libero et nibh pretium sit amet lobortis quam malesuada. Mauris est dui, pharetra vitae ultrices.
Две маленькие колонки
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
По середине одна большая
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar libero et nibh pretium sit amet lobortis quam malesuada. Mauris est dui, pharetra vitae ultrices.
Две маленькие колонки
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Одна большая колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar libero et nibh pretium sit amet lobortis quam malesuada. Mauris est dui, pharetra vitae ultrices.
И одна маленькая
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Оформление
Для оформления одной строки колонок проще всего использовать маркированный список с классом row
, при этом каждому элементу списка необходимо присвоить класс span-N
(где N
— это ширина колонки в логических единицах, от 1 до 11).
* {.span-6}{.row}
### Колонка на 6 ячеек
Абзац относится к первой полонке (см. отступ).
Этот абзац имеет такой же отступ, поэтому он тоже будет включен в первую колонку.
* {.span-3}
#### 3 ячейки
Это вторая колонка. Она в два раза меньше по ширине, чем первая.
* {.span-3}
#### 3 ячейки
Это третья колонка, равная по ширине предыдущей.
Колонка на 6 ячеек
Абзац относится к первой полонке (см. отступ).
Этот абзац имеет такой же отступ, поэтому он тоже будет включен в первую колонку.
3 ячейки
Это вторая колонка. Она в два раза меньше по ширине, чем первая.
3 ячейки
Это третья колонка, равная по ширине предыдущей.
Элементы списка могут содержать разметку произвольной сложности. Чтобы избежать проблем, запомните одно простое правило:
Всегда следите за отступами внутри элементов списка.
Если Вам необходимо поместить несколько строк с колонками подряд, друг за другом, Вам необходимо разделить списки с помощью HTML-комментария <!-- -->
, чтобы они не склеились друг с другом.
* {.span-7}{.row}
### Строка 1, колонка 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
* {.span-5}
### Строка 1, колонка 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- -->
* {.span-5}{.row}
### Строка 2, колонка 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
* {.span-7}
### Строка 2, колонка 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Строка 1, колонка 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Строка 1, колонка 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Строка 2, колонка 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Строка 2, колонка 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.