Конструктор сеток CSS Grid

Сразу три раскладки, а не одна

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

Имена областей у всех трёх раскладок общие, поэтому разметка одна. Меняется только расстановка, и это ровно то, как адаптивную сетку пишут без генератора.

Порядок на экране и порядок в разметке

Grid умеет поставить блок визуально раньше, чем он идёт в HTML. Глазами всё правильно, а клавиша Tab и экранная читалка идут по разметке, то есть в другом порядке. Получается сетка, которая выглядит верно и не работает с клавиатуры.

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

Кривую область поймаем до того, как она сломает сетку

Область в grid-template-areas обязана быть прямоугольной. Нарисуете уголок — браузер отбросит всё свойство целиком, вместе со всей расстановкой. Сообщения об ошибке при этом не будет нигде: ни в консоли, ни в инструментах разработчика, сетка просто рассыплется. Мы проверяем прямоугольность каждой области и говорим, сколько клеток не хватает.

Карточки, которые сами считают колонки

Отдельный вид сетки — repeat(auto-fit, minmax(…, 1fr)). Число колонок подбирает сам браузер: как только карточки перестают влезать в заданную ширину, колонка убирается. Медиазапросы для такой сетки не нужны вовсе. Этого приёма нет у части генераторов, а именно им делают списки товаров, статей и кейсов.

Что дальше

Готовый CSS можно тут же перевести в SCSS со вложенностью конвертером CSS и SCSS, подобрать цвета палитрой из изображения, а собранную страницу прогнать через проверку валидности HTML.