PipUI v2.0.0
  • 🌟Введиние
  • 🗃️Скачать
  • ⚠️Начало работы
  • Компоненты
    • Базовый набор
    • Отступы
    • Палитра цветов
    • Grid сетка
    • Панель навигации
    • Выпадающее меню
    • Постраничная навигация
    • Формы
    • Кнопки
    • Полосы прогресса
    • Меню навигации
    • Модальные окна
    • Оповещения
    • Подтверждения действий
    • BB-коды
    • Всплывающие подсказки
    • Вкладки
    • Хлебные крошки
    • Спойлеры
    • Галерея
    • Изображения
    • Таблицы
    • Панель BB-кодов
    • Валидаторы форм
    • Всплывающие блоки
    • Слайдер
    • Автозаполнение
    • Селектор тегов
    • Селекторы даты и времени
    • Блоки оповещений
    • Якоря
  • 📧Контакты
  • 🔁GitHub
Powered by GitBook
On this page
  1. Компоненты

Grid сетка

PreviousПалитра цветовNextПанель навигации

Last updated 2 years ago

Данный компонент позволяет быстро произвести разметку блоков внутри контейнера.

Для определения grid контейнера используется класс .d-grid или его алиас .grid.

Количество колонок и рядов внутри grid контейнера варьируется от 1 до 12, которые используют классы от .columns-1 до .columns-12 (для колонок) и .rows-1 до .rows-12 (для рядов) соответственно.

Позиции колонок внутри контейнера определяются классами с патерном .column-{1-12}-{1-12} при этом второй параметр может отсутствовать, если он равен первому.

Отступы внутри grid сетки можно выставлять с помощью классов от .gap-0 до .gap-100 с шагом 4. Для отступов внутри сетки между рядами используйте классы от .gap-row-0 до .gap-row-100, а для отступов между колонками от .gap-column-0 до .gap-column-100 так же с шагом 4.

Пример работы колонок в Grid сетке (с учетом responsive)