ОБЗОР СОВРЕМЕННЫХ ВОЗМОЖНОСТЕЙ CSS. Subgrid
Subgrid — это возможность использовать сетку (grid) внутри дочерних элементов, сохраняя структуру родительской сетки.
Задача: Создать макет сетки с изображениями, где вложенные группы элементов адаптируются по ширине родительской сетки, сохраняя гибкость отступов. Некоторым группам необходимо задать индивидуальные стили — отступы и цвет фона, чтобы визуально выделить их на фоне остальных.
Нам нужно чтобы во втором ряду элементы начинались со второй колонки и последний элемент становился четвертой колонкой, а четвертый ряд обладал другим фоном и другими отступами:
Проблема: При использовании стандартной CSS Grid сложные макеты, включающие вложенные сетки, требуют ручного управления отступами и позициями для каждой отдельной вложенной сетки.
Это может приводить к сложностям в поддержке, нарушению единообразия отступов, а также к необходимости многократного дублирования CSS кода для каждой вложенной сетки. Стилизация вложенных элементов становится сложной и неудобной для изменения.
Давайте создадим разметку для нашей сетки. У нас будет четыре строки и три колонки
Далее напишем стандартные стили для нашей сетки и элементов
Попробуем добиться требуемого результата без использования subgrid. Это будет выглядеть вот так
Мы получим следующий результат. Это немного отличается от требуемого результата, не так ли?
Безусловно, мы можем доработать наши стили и так или иначе все же добиться нужного результата, но зачем это делать, если у нас есть такая возможность в css, как subgrid?
Давайте посмотрим на то как выглядят стили, если использовать subgrid. Стили выглядят намного более лаконично и имеют меньший объем, что тоже является плюсом
Таким образом, мы получаем нужный нам результат
CSS Subgrid упрощает процесс адаптации макета, поскольку дочерние элементы могут использовать сетку родителя, автоматически подстраиваясь под его параметры
Использование Subgrid позволяет упростить создание макетов с вложенными сетками, значительно улучшая контроль над отступами и адаптацией макета. Это не только облегчает поддержание единообразного стиля, но и сокращает количество кода, улучшая читаемость и поддержку сложных сеток.
Ссылка на спецификацию: CSS Grid Layout Module Level 2
Habrahabr.ru прочитано 6802 раза
