Сетка товаров в Tilda: как настроить карточки в ряд на разных экранах
Четыре карточки в ряд могут хорошо смотреться на большом экране и стать слишком тесными на небольшом ноутбуке. А две огромные карточки на широком мониторе, наоборот, растягивают каталог. Подходящее число колонок зависит от фото, названий и кнопок.
Конструктор сетки карточек позволяет задать свои правила для разных ширин экрана. Покажем, как настроить их одним кодом и сохранить читаемость магазина.
С каких товаров начать проверку
Возьмите несколько реальных карточек: с коротким и длинным названием, со скидкой, с описанием и без него. По одной идеальной карточке легко подобрать красивую сетку, которая затем ломается на остальном каталоге.
Посмотрите, сколько места действительно нужно названию, двум ценам и кнопке. Не выбирайте число колонок только по фотографии. Если текст превращается в узкую вертикальную полоску, карточек в этом ряду слишком много для вашего содержимого.
Как выбрать правильный блок магазина
В «Где применять» ограничьте нужную область и выберите свой блок из каталога конструктора. Классический магазин и новый каталог T1291/T1301 используют разную структуру; подходящие классы подставляются при выборе блока.
Не переносите случайный селектор из другой страницы только потому, что карточки внешне похожи. Сначала убедитесь, что меняется нужный каталог, а соседний блок рекомендаций остаётся таким, каким вы его задумали.
Когда выбрать гибкую или фиксированную ширину
Гибкая сетка занимает доступное пространство с заданными боковыми отступами. У фиксированной можно ограничить максимальную ширину. Выбирайте тот вариант, который согласуется с шапкой и остальными разделами страницы.
Если весь сайт собран в одном контейнере, слишком широкий магазин может визуально от него оторваться. Сравните левую и правую границы каталога с соседними блоками. Затем настройте промежутки между колонками и рядами.
Как распределить колонки по ширинам
Добавьте нужные брейкпоинты и задайте для каждого число колонок, зазоры и высоту фото. Например, можно начать с более плотного ряда на широком экране и уменьшать его по мере сужения. Конкретные числа подберите под собственные товары.
Проверяйте не только выбранные размеры, но и промежутки между ними. Фото не должно внезапно становиться слишком низким, а кнопки — выходить за край. Переключатель размера в превью показывает один вариант; копируемый код включает все настроенные брейкпоинты.
Нужно ли переопределять шрифты
Типографика меняется отдельно. Если шрифты карточки уже настроены в Tilda и вас устраивают, оставьте их. Не уменьшайте весь текст только ради дополнительной колонки: иногда лучше показать меньше товаров в ряд.
Если переопределение нужно, проверьте название, описание и обе цены на каждом выбранном размере. Возьмите самую длинную надпись и убедитесь, что рядом остаётся место для действий. Сетка должна помогать сравнивать товары, а не только выглядеть плотнее.
Как подключить и проверить новые карточки
- Выберите блок магазина и подходящий тип сетки.
- Настройте колонки, фото и промежутки на всех нужных ширинах.
- Решите, сохранять ли текстовые настройки Tilda.
- Вставьте код в T123 после магазина и опубликуйте страницу.
- Изменяйте ширину окна, примените фильтр и подгрузите ещё товары.
Откройте каталог на телефоне и проверьте обычный выбор товара. Отдельный мобильный код не нужен: мобильные правила уже входят в общий набор настроек.
Вопросы и ответы
Можно сделать больше колонок на широком экране?
Да. Для нужной ширины задаётся своё количество карточек. Проверьте, хватает ли места названиям, ценам и действиям.
Обязательно менять шрифты?
Нет. Переопределение типографики включается отдельно; можно сохранить оформление Tilda.
Нужен отдельный код для телефона?
Нет. Настройте мобильные брейкпоинты в том же конструкторе и установите один код.
Почему важно проверить подгрузку?
В каталоге появляются новые карточки. После фильтрации и «Показать ещё» нужно убедиться, что они сохраняют нужную сетку.
