Это набор начальных шаблонов для макетов и шаблонов с использованием CSS Grid. Идея состоит в том, чтобы показать, на что способна эта техника, и предоставить отправную точку, которую можно использовать для других проектов.
Помните, что поддержка Grid браузером - это хорошо, но для устаревших браузеров требуются резервные версии. Это означает, что их прямое копирование и вставка может не подходить для некоторых случаев использования.
Макет Святого ГрааляСтарый классический трехколоночный макет, в котором две боковые панели и контейнер, содержащий основной текст, зажаты между полноширинным верхним и нижним колонтитулами.
Гибкий Святой ГраальВсе остается неизменным при изменении ширины области просмотра с использованием контейнера с жидким содержимым.
Посмотрите таблицу Pen CSS Grid - Holy Grail 2 от Джеффа Грэма (@geoffgraham) на CodePen.
Адаптивный Святой ГраальКогда область просмотра сужается, все складывается в стопку.
Смотрите таблицу Pen CSS Grid: Holy Grail Layout - Responsive от Джеффа Грэма (@geoffgraham) на CodePen.
2 столбца с верхним и нижним колонтитуламиКлассический макет блога, в котором один столбец предназначен для публикации, а другой - для боковой панели.
Гибкие 2-колонкиМакет становится мягким, когда область просмотра становится узкой, но макет остается на месте.
См. CSS-сетку Pen: верхний колонтитул, нижний колонтитул с двумя столбцами (гибкий) от Джеффа Грэма (@geoffgraham) на CodePen.
Адаптивные 2 столбцаНа небольших экранах все складывается.
См. Таблицу Pen CSS Grid: Header, Footer with 2-Column (Responsive) Джеффа Грэма (@geoffgraham) на CodePen.
Равномерно распределены, подходят по мере необходимостиЭлементы перетекают в макет и заканчиваются, когда их больше нет.
См. Статью Джеффа Грэма (@geoffgraham) на CodePen о CSS-сетке Pen, равномерно распределенной, столько, сколько необходимо.
Статья с BreakoutОтличный маленький трюк Тайлера Стика, который позволяет элементу вырываться из сетки. Рэйчел Эндрю подробно объясняет, как именованные линии сетки позволяют этому работать.
Смотрите таблицу Pen CSS Grid: статья с Breakout от Джеффа Грэма (@geoffgraham) на CodePen.
Базовый календарьКак и следовало ожидать, CSS Grid хорошо работает с календарной сеткой.
См. Таблицу Pen CSS Grid: Calendar от Джеффа Грэма (@geoffgraham) на CodePen.
Монопольный советПростое воссоздание игрового поля. У Джен Симмонс есть милая демонстрация, дополненная стилями монополии.
См. Раздел Pen CSS Grid: Monopoly Board Джеффа Грэма (@geoffgraham) на CodePen.
Наш партнер по обучению,
Frontend Masters
Требуется обучение фронтенд-разработке?
Frontend Masters - лучшее место для его получения. У них есть курсы по всем наиболее важным интерфейсным технологиям, от React до CSS, от Vue до D3, а также по Node.js и Full Stack.