Сетка

Без columns сетка вмещает столько дорожек шириной не меньше min, сколько позволяет место, и каждая поровну делит остаток. Именно этого хочет список карточек, и брейкпоинты тут не нужны: измените размер страницы, и демо ниже перестроятся сами.

Автоподбор

Поведение по умолчанию. Дорожки не уже 16rem.

Маршрутизация

Загрузка данных

Ресурсы

Изображения

Острова

Поиск

grid(
  ...['Маршрутизация', 'Загрузка данных', 'Ресурсы', 'Изображения', 'Острова', 'Поиск'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Ширина дорожки

min задаёт, насколько узкой может стать дорожка, прежде чем сетка перейдёт на меньшее число колонок. Меньше значит больше колонок.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Фиксированное число колонок

Передайте число, когда количество не должно меняться вместе с окном. Каждая дорожка получает равную долю.

Раз

Два

Три

grid({ columns: 3 },
  ...['Раз', 'Два', 'Три'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Своя раскладка

Строка передаётся напрямую в grid-template-columns — для деления «боковая панель и содержимое» или чего угодно ещё, что умеет выразить CSS grid.

Боковая панель

Содержимое, забирающее остаток строки.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Боковая панель'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Содержимое, забирающее остаток строки.'))),
)

Промежуток и выравнивание

Короткая

Карточка повыше, с двумя строками текста, чтобы показать, что align делает с её более низкими соседками.

Короткая

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Короткая'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Карточка повыше, с двумя строками текста, чтобы показать, что align делает с её более низкими соседками.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Короткая'))),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`columns`	`number \| string`	—	Фиксированное число дорожек или обычное значение grid-template-columns. Опустите для автоподбора.
`min`	`string`	`'16rem'`	Минимальная ширина дорожки при автоподборе.
`gap`	`Space`	`'md'`	Промежуток между дорожками и строками.
`align`	`string`	`'stretch'`	Любое значение align-items.
`as`	`string`	`'div'`	Какой элемент рендерить.

Дорожка никогда не становится шире самой сетки, даже если min больше доступного места, — поэтому минимум в 16rem не вызывает горизонтальную прокрутку на телефоне шириной 320 px.