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

CSS

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Добрый день!

Чтобы использовать и функцию 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 колонки.

Спасибо ))