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

    Спасибо ))

      Комментарии

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

      C++ - Тест 002. Константы

      • Результат:16баллов,
      • Очки рейтинга-10
      B

      C++ - Тест 001. Первая программа и типы данных

      • Результат:46баллов,
      • Очки рейтинга-6
      FL

      C++ - Тест 006. Перечисления

      • Результат:80баллов,
      • Очки рейтинга4
      Последние комментарии
      k
      kmssr9 февраля 2024 г. 5:43
      Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
      АК
      Анатолий Кононенко5 февраля 2024 г. 12:50
      Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
      EVA
      EVA25 декабря 2023 г. 21:30
      Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
      J
      JonnyJo25 декабря 2023 г. 19:38
      Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
      G
      Gvozdik19 декабря 2023 г. 8:01
      Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
      Сейчас обсуждают на форуме
      P
      Pisych27 февраля 2023 г. 15:04
      Как получить в массив значения из связанной модели? Спасибо, разобрался:))
      AC
      Alexandru Codreanu19 января 2024 г. 22:57
      QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
      BlinCT
      BlinCT27 декабря 2023 г. 19:57
      Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
      Дмитрий
      Дмитрий10 января 2024 г. 15:18
      Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
      Evgenii Legotckoi
      Evgenii Legotckoi12 декабря 2023 г. 17:48
      Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

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