Макеты CSS Grid Starter - CSS-хитрости

Это набор начальных шаблонов для макетов и шаблонов с использованием 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.