CSS Grid в Wepps Platform: Система классов для двумерных макетов (строки + колонки)

Введение

CSS Grid Layout - мощный инструмент для создания двумерных макетов веб-страниц. Двумерность означает одновременный контроль элементов по горизонтали (колонки) и вертикали (строки), в отличие от одномерных инструментов вроде Flexbox.

В платформе Wepps реализована система утилитарных классов для работы с Grid, которая позволяет быстро создавать адаптивные сетки без написания дополнительного CSS. Система поддерживает до 6 колонок, адаптивные breakpoints и полный контроль над выравниванием и отступами.

Зачем использовать Grid?

Проблемы, которые решает Grid

1. Сложные двумерные макеты - одновременное управление и строками, и колонками (в отличие от одномерного Flexbox)
2. Адаптивные сетки - автоматическая перестройка на разных экранах
3. Избыточный CSS - не нужно писать медиа-запросы и сложные стили
4. Выравнивание элементов - простое управление расположением контента

Когда использовать

• Карточные сетки товаров, услуг, портфолио
• Галереи изображений с элементами разного размера
• Сложные макеты страниц (header, sidebar, content, footer)
• Формы с полями разной ширины
• Дашборды и панели с виджетами

Основные концепции

Grid контейнер и элементы

Grid создаёт двумерную сетку (строки × колонки), где контейнер определяет структуру, а дочерние элементы размещаются в ячейках:

<!-- 3 колонки по горизонтали, строки создаются автоматически -->
<div class="w_grid w_3col">
    <div>Ячейка [строка 1, колонка 1]</div>
    <div>Ячейка [строка 1, колонка 2]</div>
    <div>Ячейка [строка 1, колонка 3]</div>
    <div>Ячейка [строка 2, колонка 1]</div>
    <div>Ячейка [строка 2, колонка 2]</div>
    <!-- ... и так далее -->
</div>

Ключевые свойства:

• Контейнер управляет всеми дочерними элементами
• Элементы автоматически размещаются в ячейках
• Поддержка span (растягивание) элементов
• Независимое управление строками и колонками

Базовый класс .w_grid

<div class="w_grid">
    <div>Элемент 1</div>
    <div>Элемент 2</div>
    <div>Элемент 3</div>
</div>

По умолчанию .w_grid имеет:

• display: grid
• grid-template-rows: auto
• grid-auto-flow: row (элементы располагаются построчно)
• gap: 0 (нет отступов между элементами)

Защита от переполнения

Все дочерние элементы Grid автоматически получают min-width: 0, что предотвращает переполнение контейнера длинным содержимым.

Структура колонок

Определение количества колонок

Используйте классы .w_Ncol для создания сетки с N колонками:

<!-- 3 колонки -->
<div class="w_grid w_3col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Доступные классы:

• .w_1col - одна колонка (auto)
• .w_2col - две равные колонки
• .w_3col - три равные колонки
• .w_4col - четыре равные колонки
• .w_5col - пять равных колонок
• .w_6col - шесть равных колонок

Все колонки создаются с использованием repeat(N, 1fr), что обеспечивает равномерное распределение пространства.

Растягивание элементов

Элементы могут занимать несколько колонок с помощью классов .w_Nscol:

<div class="w_grid w_4col">
    <div class="w_2scol">Занимает 2 колонки</div>
    <div>Стандартная</div>
    <div>Стандартная</div>
    <div class="w_3scol">Занимает 3 колонки</div>
    <div>Стандартная</div>
</div>

Доступные классы для span по колонкам:

• .w_1scol до .w_6scol - от 1 до 6 колонок

Растягивание по строкам

Аналогично колонкам, элементы могут занимать несколько строк:

<div class="w_grid w_3col">
    <div class="w_2srow">Высокий элемент</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Доступные классы для span по строкам:

• .w_1srow до .w_6srow - от 1 до 6 строк

Отступы между элементами (Gap)

Базовые размеры

Платформа использует CSS-переменные для отступов:

<!-- Базовый отступ -->
<div class="w_grid w_3col w_gap">
    <!-- Отступ var(--s2) -->
</div>

Доступные классы:

• .w_gap_null - без отступов (gap: 0)
• .w_gap_small - малый отступ (var(--s))
• .w_gap - стандартный отступ (var(--s2))
• .w_gap_medium - средний отступ (var(--s4))
• .w_gap_large - большой отступ (var(--s5))
• .w_gap_xlarge - очень большой отступ (var(--s6))

Практический пример

<div class="w_grid w_4col w_gap_large">
    <div>Элемент с большими отступами</div>
    <div>Элемент с большими отступами</div>
    <div>Элемент с большими отступами</div>
    <div>Элемент с большими отступами</div>
</div>

Выравнивание элементов

Выравнивание по горизонтали (Justify Items)

Управление выравниванием элементов внутри их ячеек по горизонтали:

<div class="w_grid w_3col w_ji_center">
    <!-- Все элементы центрированы по горизонтали -->
</div>

Доступные классы:

• .w_ji_start - выравнивание к началу (justify-items: start)
• .w_ji_center - центрирование (justify-items: center)
• .w_ji_end - выравнивание к концу (justify-items: end)
• .w_ji_stretch - растягивание (justify-items: stretch)

Выравнивание по вертикали (Align Items)

Управление выравниванием элементов внутри их ячеек по вертикали:

<div class="w_grid w_3col w_ai_center">
    <!-- Все элементы центрированы по вертикали -->
</div>

Доступные классы:

• .w_ai_start - выравнивание к верху (align-items: start)
• .w_ai_center - центрирование (align-items: center)
• .w_ai_end - выравнивание к низу (align-items: end)
• .w_ai_stretch - растягивание (align-items: stretch)

Комбинирование выравниваний

<div class="w_grid w_3col w_ji_center w_ai_center w_gap">
    <!-- Идеальное центрирование всех элементов -->
    <div>Центр 1</div>
    <div>Центр 2</div>
    <div>Центр 3</div>
</div>

Адаптивность

Концепция responsive-классов

Wepps Grid поддерживает адаптивный дизайн с двумя breakpoints:

• Medium (max-width: 810px) - планшеты
• Small (max-width: 480px) - мобильные устройства

Все основные классы имеют responsive-варианты с суффиксами _view_medium и _view_small.

Адаптивные колонки

<div class="w_grid w_4col w_2col_view_medium w_1col_view_small">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Поведение:

• Desktop (>810px): 4 колонки
• Tablet (481-810px): 2 колонки
• Mobile (≤480px): 1 колонка

Адаптивные span-классы

<div class="w_grid w_4col">
    <div class="w_2scol w_1scol_view_medium w_1scol_view_small">
        Широкий на desktop, узкий на планшете и мобильном
    </div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Адаптивные отступы

<div class="w_grid w_3col w_gap_large w_gap_view_medium w_gap_small_view_small">
    <!-- Большие отступы на desktop, средние на планшете, малые на мобильном -->
</div>

Доступны все варианты gap с суффиксами _view_medium и _view_small:

• .w_gap_null_view_medium / .w_gap_null_view_small
• .w_gap_small_view_medium / .w_gap_small_view_small
• .w_gap_view_medium / .w_gap_view_small
• .w_gap_medium_view_medium / .w_gap_medium_view_small
• .w_gap_large_view_medium / .w_gap_large_view_small
• .w_gap_xlarge_view_medium / .w_gap_xlarge_view_small

Скрытие элементов

<div class="w_grid w_3col w_hide_view_small">
    <!-- Скрыто на мобильных устройствах -->
</div>

Доступные классы:

• .w_hide - полное скрытие
• .w_hide_view_medium - скрыто на планшетах
• .w_hide_view_small - скрыто на мобильных

Адаптивное выравнивание

<div class="w_grid w_3col w_ji_end w_ji_center_view_medium w_ji_start_view_small">
    <!-- Справа на desktop, по центру на планшете, слева на мобильном -->
</div>

Практические примеры

Карточки товаров

<div class="w_grid w_4col w_3col_view_medium w_2col_view_small w_gap">
    <div class="product-card">
        <img src="product1.jpg" alt="Товар 1">
        <h3>Товар 1</h3>
        <p>1000 ₽</p>
    </div>
    <div class="product-card">
        <img src="product2.jpg" alt="Товар 2">
        <h3>Товар 2</h3>
        <p>1500 ₽</p>
    </div>
    <!-- ... другие карточки ... -->
</div>

Галерея с featured-изображением

<div class="w_grid w_4col w_2col_view_small w_gap">
    <div class="w_2scol w_2srow w_1scol_view_small w_1srow_view_small">
        <img src="featured.jpg" alt="Главное изображение">
    </div>
    <div><img src="1.jpg" alt="1"></div>
    <div><img src="2.jpg" alt="2"></div>
    <div><img src="3.jpg" alt="3"></div>
    <div><img src="4.jpg" alt="4"></div>
    <div><img src="5.jpg" alt="5"></div>
    <div><img src="6.jpg" alt="6"></div>
</div>

Сложный макет

<div class="w_grid w_6col w_3col_view_medium w_1col_view_small w_gap_large w_gap_view_medium">
    <header class="w_6scol w_3scol_view_medium w_1scol_view_small">
        Шапка сайта
    </header>

    <aside class="w_2scol w_3scol_view_medium w_1scol_view_small">
        Боковая панель
    </aside>

    <main class="w_4scol w_3scol_view_medium w_1scol_view_small">
        Основной контент
    </main>

    <footer class="w_6scol w_3scol_view_medium w_1scol_view_small">
        Подвал
    </footer>
</div>

Форма с разными размерами полей

<div class="w_grid w_2col w_1col_view_small w_gap">
    <input type="text" placeholder="Имя">
    <input type="text" placeholder="Фамилия">
    <input type="email" class="w_2scol w_1scol_view_small" placeholder="Email">
    <input type="tel" placeholder="Телефон">
    <input type="text" placeholder="Город">
    <textarea class="w_2scol w_1scol_view_small" placeholder="Сообщение"></textarea>
    <button class="w_2scol w_1scol_view_small">Отправить</button>
</div>

Дашборд с виджетами

<div class="w_grid w_6col w_3col_view_medium w_2col_view_small w_gap w_ai_start">
    <div class="w_3scol w_3scol_view_medium w_2scol_view_small widget">
        <h3>Статистика продаж</h3>
        <!-- Содержимое виджета -->
    </div>

    <div class="w_3scol w_3scol_view_medium w_2scol_view_small widget">
        <h3>Новые пользователи</h3>
        <!-- Содержимое виджета -->
    </div>

    <div class="w_2scol widget">
        <h3>Задачи</h3>
        <!-- Список задач -->
    </div>

    <div class="w_4scol w_3scol_view_medium w_2scol_view_small widget">
        <h3>График активности</h3>
        <!-- График -->
    </div>
</div>

Лучшие практики

1. Mobile-first подход

<!-- ✅ Хорошо: от простого к сложному -->
<div class="w_grid w_1col w_2col_view_medium w_3col">
    <!-- На мобильном 1 колонка, на планшете 2, на desktop 3 -->
</div>

<!-- ❌ Плохо: слишком много переопределений -->
<div class="w_grid w_3col w_2col_view_medium w_1col_view_small">
    <!-- Излишняя избыточность -->
</div>

2. Семантические breakpoints

<!-- ✅ Хорошо: адаптация под содержимое -->
<div class="w_grid w_4col w_3col_view_medium w_2col_view_small">
    <!-- Карточки минимум 250px ширины -->
</div>

<!-- ❌ Плохо: игнорирование размера контента -->
<div class="w_grid w_6col w_6col_view_medium w_6col_view_small">
    <!-- Слишком узкие элементы на мобильном -->
</div>

3. Контроль отступов

<!-- ✅ Хорошо: уменьшение отступов на малых экранах -->
<div class="w_grid w_3col w_gap_large w_gap_view_medium w_gap_small_view_small">
    <!-- Адаптивные отступы -->
</div>

<!-- ❌ Плохо: фиксированные большие отступы -->
<div class="w_grid w_3col w_gap_xlarge">
    <!-- Слишком много пространства на мобильном -->
</div>

4. Избегайте излишней сложности

<!-- ❌ Плохо: 6 колонок для 3 элементов -->
<div class="w_grid w_6col">
    <div class="w_2scol">1</div>
    <div class="w_2scol">2</div>
    <div class="w_2scol">3</div>
</div>

<!-- ✅ Хорошо: 3 колонки напрямую -->
<div class="w_grid w_3col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

5. Выравнивание для улучшения UX

<!-- ✅ Правильно: блоки разной высоты выравнены по верху -->
<div class="w_grid w_3col w_ai_start w_gap">
    <div>Короткий текст</div>
    <div>Очень длинный текст с множеством деталей и информации</div>
    <div>Средний текст</div>
</div>

Отладка и оптимизация

Визуализация Grid в браузере

Используйте DevTools для визуализации структуры Grid:

1. Откройте DevTools (F12)
2. Выберите элемент с классом .w_grid
3. В панели Layout/Grid включите отображение сетки
4. Увидите линии grid и номера треков

Частые проблемы

1. Переполнение контента в ячейках

/* Проблема: длинный текст без пробелов растягивает ячейку */
/* Решение: добавлено автоматически через min-width: 0 */
.w_grid > * {
    min-width: 0; /* Уже встроено в систему */
    overflow-wrap: break-word; /* Добавьте при необходимости */
}

2. Неравномерные высоты строк

<!-- Проблема: элементы разной высоты -->
<!-- Решение: используйте align-items -->
<div class="w_grid w_3col w_ai_start">
    <div>Короткий</div>
    <div>Очень длинный текст</div>
    <div>Средний</div>
</div>

3. Элементы выходят за пределы контейнера

<!-- Проблема: span больше количества колонок -->
<!-- 3 колонки, но элемент пытается занять 4 -->
<div class="w_grid w_3col">
    <div class="w_4scol">Выйдет за пределы!</div>
</div>

<!-- Решение: используйте правильный span -->
<div class="w_grid w_3col">
    <div class="w_3scol">Правильно</div>
</div>

Производительность

Оптимизация количества элементов

<!-- ❌ Неоптимально: избыточная вложенность -->
<div class="w_grid w_3col">
    <div>
        <div class="w_grid w_2col">
            <div>
                <div class="w_grid w_3col">
                    <!-- Слишком глубоко -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Оптимально: плоская структура где возможно -->
<div class="w_grid w_6col">
    <!-- Используйте span вместо вложенности -->
    <div class="w_3scol">Контент</div>
    <div class="w_2scol">Контент</div>
    <div class="w_1scol">Контент</div>
</div>

Gap vs Margin

/* ✅ Оптимально: используйте gap */
.w_grid.w_gap {
    gap: var(--s2);
}

/* ❌ Неоптимально: margin на каждом элементе */
.w_grid > * {
    margin: var(--s);
}
/* Требует дополнительных вычислений и negative margins */

Рекомендации

• Gap более производителен, чем margin на дочерних элементах
• Избегайте вложенности Grid более 3 уровней
• min-width: 0 уже встроен и не требует дополнительных правил
• Grid не создаёт reflow при изменении gap, в отличие от margin

Интеграция с другими компонентами

Работа с Flexbox

Grid и Flexbox отлично дополняют друг друга:

<!-- Grid для общей структуры, Flexbox для выравнивания внутри -->
<div class="w_grid w_3col w_gap">
    <div class="w_flex w_jc_between w_ai_center">
        <h3>Заголовок</h3>
        <button>Действие</button>
    </div>
    <div class="w_flex w_fd_column w_gap_small">
        <span>Строка 1</span>
        <span>Строка 2</span>
    </div>
    <div class="w_flex w_jc_center w_ai_center">
        <img src="icon.svg" alt="Иконка">
    </div>
</div>

Работа с утилитами отступов

<!-- Комбинирование Grid с padding/margin классами -->
<div class="w_grid w_3col w_gap w_p_3">
    <div class="w_mb_2">Элемент с нижним отступом</div>
    <div class="w_p_2">Элемент с внутренними отступами</div>
    <div>Обычный элемент</div>
</div>

Работа с медиа-контентом

<!-- Grid для галереи изображений -->
<div class="w_grid w_4col w_2col_view_small w_gap_small">
    <img src="1.jpg" alt="1" class="w_full">
    <img src="2.jpg" alt="2" class="w_full">
    <img src="3.jpg" alt="3" class="w_full">
    <img src="4.jpg" alt="4" class="w_full">
</div>

Сравнение Grid и Flexbox

Когда использовать Grid

• ✅ Двумерные макеты (строки И колонки)
• ✅ Карточные сетки
• ✅ Сложные макеты страниц
• ✅ Фиксированное количество элементов в строке
• ✅ Элементы разного размера

Когда использовать Flexbox

• ✅ Одномерные макеты (только строка ИЛИ колонка)
• ✅ Навигация и меню
• ✅ Выравнивание элементов
• ✅ Динамическое количество элементов
• ✅ Контроль порядка элементов

Комбинирование

<!-- Лучшее из обоих миров -->
<div class="w_grid w_3col w_gap">
    <div class="w_flex w_jc_between w_ai_center">
        <!-- Grid элемент с Flexbox внутри -->
        <span>Заголовок</span>
        <button>Кнопка</button>
    </div>
    <!-- ... остальные элементы -->
</div>

Заключение

CSS Grid в Wepps Platform предоставляет:

• ✅ Простоту использования - интуитивно понятные классы без необходимости писать CSS
• ✅ Адаптивность - встроенная поддержка двух breakpoints (810px, 480px)
• ✅ Гибкость - до 6 колонок с span до 6 единиц по строкам и колонкам
• ✅ Производительность - минимальный и оптимизированный CSS, использование gap
• ✅ Консистентность - единая система классов для всего проекта

Используйте Grid для структурирования двумерного контента, комбинируйте с Flexbox для одномерных задач, и создавайте современные адаптивные интерфейсы с минимальными усилиями.

Файлы: packages/WeppsExtensions/Template/Layout/Grid.css