Использование CSS Grid

Это коллекция начальных шаблонов для макетов и шаблонов с использованием CSS Grid (сеток). Идея заключается в том, чтобы сделать универсальный стартовый шаблоны, которые могут быть изменены для других проектов.

Помните, что поддержка Grid в браузере хороша, но дл них требуется поддержка устаревших браузеров. Это означает, что их прямое копирование и вставка могут не подходить для некоторых случаев использования.

Схема Святого Грааля или Holy Grail Layout

Старая классическая компоновка с тремя столбцами, в которой две боковые панели и контейнер, которые помещены между полноразмерным хэдэром и футером.

Гибкий Святой Грааль ( Flexible )

Все остается без изменений, так как ширина области просмотра изменяется с использованием контейнера с резиновым содержимым.

Отзывчивый Святой Грааль ( Responsive )

Блоки складываются, когда область просмотра становится узкой.


2 колонки с футером и хэдэром

Классический макет блога, где один столбец для поста, а другой для боковой панели.

Резиновые 2-колонки

Макет становится резиновым, когда область просмотра становится узкой, но макет остается на месте.

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

Вещи складываются на меньших экранах.

Равномерное распределение блоков

Элементы равномерно распределяются по областе.

Статья с разрывом

Отличный маленький трюк, который позволяет элементу вырваться из сетки.

Базовый календарь

Как и следовало ожидать, CSS Grid хорошо подходит для календарной сетки.

Монопольная доска

Есть приятное демо в комплекте со стилями Monpoly.

Оставляйте комментарии с вашими вариантами CSS Grid а также подписывайтесь на наш телеграм-канал, чтобы всегда быть вкурсе новых статей 🙂

Оставьте ответ

comment-avatar

*