Как использовать функцию calc() в СSS для создания сетки

CSS

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Добрый день!

Чтобы использовать и функцию calc() и переменную var в этой функции для организации сетки ( GRID ), нужно написать класс CSS, который будет содержать переменную, от которой будет производиться расчёт, а также написать ещё комплект стиле, которые будут перегружать эту переменную.

Например, напишем класс ячейки cell , у которого будет две переменных, которые будут отвечать за количество колонок (переменная --col ), которое будет занимать ячейка и за сдвиг с левого края (переменная --offset ). При этом всего будет в одной строке находиться до десяти ячеек. То есть минимальная ширина ячейки будет равна 10%.

.cell
{
    display: inline-block;
    --col: 10;
    --offset: 0;
    width:  -webkit-calc(10% * var(--col));
    width:     -moz-calc(10% * var(--col));
    width:          calc(10% * var(--col));
    margin-left: -webkit-calc(10% * var(--offset));
    margin-left:    -moz-calc(10% * var(--offset));
    margin-left:         calc(10% * var(--offset));
}

По умолчанию ячейка будет занимать 100% ширины строки.

Чтобы переопределить переменные, необходимо будет создать дополнительные стили, например можно использовать data атрибуты. Так для переопределения количества колонок, которые будет занимать ячейка можно использовать data-col :

[data-col="1"] { --col: 1; }
[data-col="2"] { --col: 2; }
[data-col="3"] { --col: 3; }
[data-col="4"] { --col: 4; }
[data-col="5"] { --col: 5; }
[data-col="6"] { --col: 6; }
[data-col="7"] { --col: 7; }
[data-col="8"] { --col: 8; }
[data-col="9"] { --col: 9; }
[data-col="10"] { --col: 10; }

Аналогично для сдвига ячейки:

[data-offset="1"] { --offset: 1; }
[data-offset="2"] { --offset: 2; }
[data-offset="3"] { --offset: 3; }
[data-offset="4"] { --offset: 4; }
[data-offset="5"] { --offset: 5; }
[data-offset="6"] { --offset: 6; }
[data-offset="7"] { --offset: 7; }
[data-offset="8"] { --offset: 8; }
[data-offset="9"] { --offset: 9; }
[data-offset="10"] { --offset: 10; }

Применение:

<div class="cell" data-col="4" data-offset="2"></div>

Получим ячейки на 4 колонки со сдвигом на 2 колонки.

Спасибо ))