Автор В предыдущей статье были приведены ссылки на паттерны верстки с помощью CSS FlexBox Layout. В данном же материале настала очередь CSS сетки.
И вновь будет уместно сослаться на книгу Кита Гранта CSS для профи. В главе 6 хорошо описано как работать с CSS сетками. Глава начинается знакомством с анатомией сетки и созданием базовой сеточной разметки (через CSS свойства grid-template-columns и grid-template-rows) с указанием номеров линий и полос (в свойствах grid-column и grid-row), чтобы обозначить границы каждого элемента.
Затем рассматривается альтернативный синтаксис для компановки элементов – присвоение имен областям и линиям сетки и работа с размещением элементов через grid-template-areas.
И в завершение главы описывается создание неявной сетки с компактным размещением элементов разного размера.
Эти 3 подхода, видимо, применяются достаточно часто. Стоит владеть ими как следует. Эти приему прослеживаются и в статье MDN Realizing common layouts using grids.
Также полезно будет иметь под рукой заготовки типовых раскладок на базе CSS Grid Layout:
- CSS Grid Starter Layouts – Святой грааль, 2 колонки с подвалом и шапкой, блоки в неявной сеткие, статья с разрывом
- Grid by Example – Целый сайт с различными примерами применения CSS сетки
- Десять современных макетов одной строкой CSS – ряд небольших заготовок, которые частично повторяют предыдущие статьи
- 8 Snippets for Creating Common Website Layouts with CSS Grid – ряд полезных раскладок более высокого уровня, чем в предыдущих статьях, но как следсвие, с более узким применением. Например, таблица с ценами и фотогалерея