Макеты компоновщиков сетки CSS онлайн урок.


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

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

Макет Holy Grail

Классический трехколоночный макет ol, где две боковые панели и контейнер, содержащий копию тела, зажаты между верхним и нижним колонтитулом полной ширины.

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

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

См. Pen CSS Grid - Holy Grail 2 Джеффа Грэма ( @geoffgraham ) на CodePen .

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

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

См. Pen CSS Grid: Макет Holy Grail - Отзывчивый Джефф Грэм ( @geoffgraham ) на CodePen .


2-Столбцы с верхним и нижним колонтитулом

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

Гибкие 2-столбцы

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

См. «Сетка пэра »: верхний колонтитул, нижний колонтитул с 2-столбцовым (гибким) Джеффом Грэмом ( @geoffgraham ) на CodePen .

Ответные 2-столбцы

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

См. «Сетка пэра »: верхний колонтитул, нижний колонтитул с двухколоночным (отзывчивым) Джеффом Грэмом ( @geoffgraham ) на CodePen .


Равномерно распределен, подходит по мере необходимости

Элементы втекают в макет и заканчиваются, когда их больше нет.

См. Раздел «Ручка » CSS-сетка, равномерно распределенная, сколько угодно Джефф Грэм ( @geoffgraham ) на CodePen .

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

Большой трюк Tyler Sticka , который позволяет элементу вырваться из сетки. Рэйчел Эндрю дает подробное объяснение о том, как названные линии сетки позволяют этому работать.

См. «Сетка пера CSS: статья с прорывом » Джеффом Грэмом ( @geoffgraham ) на CodePen .


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

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

См. Pen CSS Grid: Календарь Джеффа Грэма ( @geoffgraham ) на CodePen .


Monopoly Board

Простой отдых игрового поля. У Джен Симмонс есть сладкая демонстрация в комплекте с стилями Monpoly.

См. Pen CSS Grid: Monopoly Board Джеффа Грэма ( @geoffgraham ) на CodePen .