Построение сеток

Сетки в Berry CSS можно создавать с помощью Flexbox, CSS Grid или float (устаревший способ).

См. также Адаптивная сетка на flexbox

Flex-сетка

У контейнера задаётся класс flex и все непосредственно вложенные элементы, автоматически становятся ячейками. Это стандартное поведение Flexbox-модели.

<div class="flex">
    <div class="pad20 bordered">1</div>
    <div class="pad20 bordered">2</div>
    <div class="pad20 bordered">3</div>
</div>

Flex-сетка растягивается на всю ширину контейнера. Это обеспечивается за счёт свойств justify-content: between и align-items: stretch. Если такое поведение не требуется, то нужно использовать класс b-flex.

<div class="b-flex">
    <div class="pad20 bordered">1</div>
    <div class="pad20 bordered">2</div>
    <div class="pad20 bordered">3</div>
</div>

Для того, чтобы управлять размерами ячеек используются классы ширины с префиксом w.

Ширина ячеек в процентах

Классы ширины по умолчанию задают размеры в процентах. Например w60 — это width: 60%. Таким образом можно указывать произвольные размеры с точностью до 1%.

<div class="flex">
    <div class="w20 pad20 bordered">1</div>
    <div class="w30 pad20 bordered">2</div>
    <div class="w40 pad20 bordered">3</div>
</div>

Если суммарная ширина ячеек менее 100%, оставшиеся проценты будут равномерно использованы для отступов. Если сумма окажется более 100%, то они будут равномерно распределены между ячейками. Это стандартное поведение Flexbox-модели.

Ширина ячеек в 12-колоночной сетке

Классы wXcol используются для организации 12-колоночной сетки. Класс w1col задаёт width:8.3333333333%, что равно пропорции 1/12. Таким образом доступны классы от w1col до w12col, которые задают соответствующую ширину в процентах от числа 12.

2 / 12 (16.67%)

4 / 12 (33.33%)

5 / 12 (41.67%)

<div class="flex">
    <div class="w2col pad10 bordered">2 / 12 (16.67%)</div>
    <div class="w4col pad10 bordered">4 / 12 (33.33%)</div>
    <div class="w5col pad10 bordered">5 / 12 (41.67%)</div>
</div>

При желании можно одновременно использовать «классы процентов» и «классы 12-и колонок».

<div class="flex">
    <div class="w20 pad10 bordered">1</div>
    <div class="w4col pad10 bordered">2</div>
    <div class="w30 pad10 bordered">3</div>
    <div class="w1col pad10 bordered">4</div>
</div>

Переносы ячеек

Для того, чтобы ячейки могли переноситься на другую строчку, следует добавить класс flex-wrap. Если ячейки окажутся больше по ширине, чем контейнер, то произойдет перенос на новую строку.

<div class="flex flex-wrap">
    <div class="w30 pad10 bordered">1</div>
    <div class="w30 pad10 bordered">2</div>
    <div class="w30 pad10 bordered">3</div>
    <div class="w30 pad10 bordered">4</div>
</div>

Адаптивность

Для адаптивного поведения используются аналогичные классы, только с суффиксами адаптивности -tablet, -phone и т.д.

<div class="flex flex-wrap-tablet">
    <div class="w30 w50-tablet w100-phone pad10 bordered">1</div>
    <div class="w30 w50-tablet w100-phone pad10 bordered">2</div>
    <div class="w30 w50-tablet w100-phone pad10 bordered">3</div>
</div>

<div class="flex flex-wrap-tablet">
    <div class="w3col w6col-tablet w12col-phone pad10 bordered">1</div>
    <div class="w3col w6col-tablet w12col-phone pad10 bordered">2</div>
    <div class="w3col w6col-tablet w12col-phone pad10 bordered">3</div>
</div>