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

Сетки в Berry CSS можно создавать с помощью Flexbox или CSS Grid.

См. также Адаптивная сетка на 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 (в Berry CSS используется только tablet, но возможно создание других условий).

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

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

CSS Grid

Поддержка CSS Grid реализована через классы grid-var (контейнер) и grid-item-var (ячейка). Поведение задаётся с помощью css-переменных.

Пример 1

<div class="mar20-tb grid-var" style="--grid-gap: 10px; --grid-columns: auto auto auto;">
    <div class="pad10 bordered">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
</div>

Пример 2

<div class="mar20-tb grid-var" style="--grid-gap: 20px 10px; --grid-columns: auto auto auto;">     
    <div class="pad10 bordered grid-item-var" style="--grid-item-column: 1/3; --grid-item-row: 1/3">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered grid-item-var" style="--grid-item-column: 2/4; --grid-item-row: 3/4">5</div>
</div>

Пример 3

<div class="mar20-tb grid-var" style="--grid-gap: 10px; --grid-columns: 1fr 2fr 4fr;">     
    <div class="pad10 bordered grid-item-var" style="--grid-item-column: 1/3">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
</div>

Пример 4

<div class="mar20-tb grid-var" style="--grid-gap: 15px; --grid-columns: 1fr 2fr 4fr; --grid-rows: 40px 80px">     
    <div class="pad10 bordered">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
    <div class="pad10 bordered">6</div>
    <div class="pad10 bordered">7</div>
    <div class="pad10 bordered">8</div>
</div>

12-колоночная сетка в CSS Grid

Сетка задаётся с помощью классов grid-Xcol, где X — это число колонок от 1 до 12.

<div class="mar20-tb grid-6col" style="--grid-gap: 10px;">
    <div class="pad10 bordered">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
    <div class="pad10 bordered">6</div>
    <div class="pad10 bordered">7</div>
    <div class="pad10 bordered">8</div>
</div>

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

Адаптивность CSS Grid задаётся с помощью классов адаптивности:

grid-var-tablet
grid-item-var-tablet
grid-Xcol-tablet

Изменяйте размеры браузера, чтобы увидеть поведение сеток в этих примерах.

<div class="mar20-tb grid-var grid-var-tablet" style="--grid-gap: 10px; --grid-columns: auto auto auto; --grid-columns-tablet: auto auto;">
    <div class="pad10 bordered">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
</div>

<div class="mar40-t grid-var" style="--grid-gap: 10px; --grid-columns: auto auto;">
    <div class="pad10 bordered grid-item-var grid-item-var-tablet" style="--grid-row: 1/3; --grid-row-tablet: 1/4;">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered grid-item-var-tablet" style="--grid-item-column-tablet: 1/3;">5</div>
</div>

<div class="mar20-tb grid-6col grid-2col-tablet" style="--grid-gap: 10px;">
    <div class="pad10 bordered">1</div>
    <div class="pad10 bordered">2</div>
    <div class="pad10 bordered">3</div>
    <div class="pad10 bordered">4</div>
    <div class="pad10 bordered">5</div>
    <div class="pad10 bordered">6</div>
    <div class="pad10 bordered">7</div>
    <div class="pad10 bordered">8</div>
</div>