CSS Grid Layout. Паттерны

В предыдущей статье были приведены ссылки на паттерны верстки с помощью 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:

Leave a Reply

Ваш адрес email не будет опубликован.