Evgenii Legotckoi
Evgenii Legotckoi11 апреля 2017 г. 3:00

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

CSS

Всем привет!
Подскажите, как использовать функцию calc() в CSS, чтобы сделать сетку, например, как в Bootstrap? Только чтобы всё рассчитывалось от какой-нибудь переменной. Там вроде же можно задавать переменные уже?

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

Вам это нравится? Поделитесь в социальных сетях!

2
Evgenii Legotckoi
  • 11 апреля 2017 г. 13:36
  • Ответ был помечен как решение.

Добрый день!

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

    Evgenii Legotckoi
    • 11 апреля 2017 г. 14:44

    Спасибо ))

      Комментарии

      Только авторизованные пользователи могут публиковать комментарии.
      Пожалуйста, авторизуйтесь или зарегистрируйтесь
      AD

      C++ - Тест 004. Указатели, Массивы и Циклы

      • Результат:50баллов,
      • Очки рейтинга-4
      m
      • molni99
      • 26 октября 2024 г. 1:37

      C++ - Тест 004. Указатели, Массивы и Циклы

      • Результат:80баллов,
      • Очки рейтинга4
      m
      • molni99
      • 26 октября 2024 г. 1:29

      C++ - Тест 004. Указатели, Массивы и Циклы

      • Результат:20баллов,
      • Очки рейтинга-10
      Последние комментарии
      i
      innorwall13 ноября 2024 г. 23:03
      Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами what is priligy tablets What happens during the LASIK surgery process
      i
      innorwall13 ноября 2024 г. 20:09
      Использование переменных объявленных в CMakeLists.txt внутри C++ файлов where can i buy priligy online safely Tom Platz How about things like we read about in the magazines like roid rage and does that really
      i
      innorwall11 ноября 2024 г. 22:12
      Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
      i
      innorwall11 ноября 2024 г. 18:23
      QML - Урок 035. Использование перечислений в QML без C++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
      i
      innorwall11 ноября 2024 г. 15:50
      Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
      Сейчас обсуждают на форуме
      i
      innorwall13 ноября 2024 г. 18:52
      добавить qlineseries в функции PMID 35774217 Free PMC article priligy cvs
      i
      innorwall11 ноября 2024 г. 10:55
      Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
      9
      9Anonim25 октября 2024 г. 9:10
      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
      ИМ
      Игорь Максимов3 октября 2024 г. 4:05
      Реализация навигации по разделам Спасибо Евгений!

      Следите за нами в социальных сетях