Логотип Berry CSSBerry CSS 4.2

CSS Grid

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

Пример 1
1
2
3
4
5
<div class="grid-var" style="--gap: 10px; --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
1
2
3
4
5
<div class="grid-var" style="--gap: 20px 10px; --columns: auto auto auto;">     
    <div class="pad10 bordered grid-item-var" style="--column: 1/3; --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="--column: 2/4; --row: 3/4">5</div>
</div>
Пример 3
1
2
3
4
5
<div class="grid-var" style="--gap: 10px; --columns: 1fr 2fr 4fr;">     
    <div class="pad10 bordered grid-item-var" style="--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
1
2
3
4
5
6
7
8
<div class="grid-var" style="--gap: 15px; --columns: 1fr 2fr 4fr; --rows: 40px 80px">     
    <div class="bordered">1</div>
    <div class="bordered">2</div>
    <div class="bordered">3</div>
    <div class="bordered">4</div>
    <div class="bordered">5</div>
    <div class="bordered">6</div>
    <div class="bordered">7</div>
    <div class="bordered">8</div>
</div>

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

Адаптивность CSS Grid задаётся с помощью классов адаптивности (настраивается в _variables.scss):

  • grid-var
  • grid-var-tablet
  • grid-var-phone
  • grid-var-small
  • grid-item-var
  • grid-item-var-tablet
  • grid-item-var-phone
  • grid-item-var-small

В каждом их этих классов работают css-переменные, имеющие тот же суффикс адаптивности:

  • --gap
  • --gap-tablet
  • --gap-phone
  • --gap-small
  • --columns
  • --columns-tablet
  • --columns-phone
  • --columns-small
  • --rows
  • --rows-tablet
  • --rows-phone
  • --rows-small
  • --column
  • --column-tablet
  • --column-phone
  • --column-small
  • --row
  • --row-tablet
  • --row-phone
  • --row-small
Изменяйте размеры браузера, чтобы увидеть поведение сеток в этих примерах.
1
2
3
4
5
<div class="mar20-tb grid-var grid-var-tablet grid-var-phone" style="--gap: 10px; --columns: auto auto auto; --columns-tablet: auto auto; --columns-phone: 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>
1
2
3
4
5
<div class="grid-var" style="--gap: 10px; --columns: auto auto;">
    <div class="pad10 bordered grid-item-var grid-item-var-tablet" style="--row: 1/3; --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="--column-tablet: 1/3;">5</div>
</div>