Бенто-сетка в дизайне сайтов: в чём преимущества и как её сделать с примером кода

09.11.2026 👁 27

Архитектурному бюро нужно показать построенный дом. Для первого знакомства с проектом у него есть четыре вещи: фотография с берега, план этажа, площадь и крупный план деревянного фасада. Если отдать каждому материалу по четверти экрана, у надписи «164 м²» окажется столько же места, сколько у фотографии. Здесь и пригодится бенто-сетка: снимок можно растянуть на половину страницы, а три детали собрать рядом.

Название пришло от японской коробки для еды с отделениями. В веб-дизайне принцип тот же: у блоков разный размер, но их края совпадают по нескольким общим направляющим. В подборке A1 Gallery рядом стоят портфолио Lorenzo Cabra и сайт магазина Better Nights. У бюро FORMA на нашей иллюстрации вообще нет скруглений: фотографию и план связывают общая кромка сверху и узкий просвет между ними.

Что положить в крупную ячейку

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

Другой случай — страница портативной колонки. Посмотрите на оранжевую модель ниже. На общем фото видны форма корпуса и петля для переноски. Маленький снимок справа отвечает на вопрос, где разъём для зарядки, а для веса хватает одной строки: 620 г. Прятать эти сведения в карусель неудобно: человеку придётся листать фотографии, чтобы выяснить, подойдёт ли его кабель.

У такого решения есть граница. Пока покупатель изучает одну колонку, сочетание фото и коротких подписей работает. Добавьте ещё две модели, и для сравнения веса уже придётся искать три числа в разных частях страницы. На этом месте я бы закончил бенто-блок и поставил обычную таблицу с тремя столбцами.

Как собрать сетку, которая переживёт правку текста

Разложите материалы в одну колонку в том порядке, в котором их прочтут с телефона. У агентства сначала идёт задача клиента, следом результат и пояснение, какая услуга к нему привела. Этот порядок перенесите в HTML: по нему же посетитель со скринридером будет знакомиться со страницей.
На широком экране включите CSS Grid. Начните с четырёх равных колонок и одного промежутка между ними (в нашем примере 12 пикселей). Крупному блоку отдайте две колонки и два ряда. Высоту строк оставьте по содержимому: когда редактор допишет пару предложений, нижняя карточка просто сдвинется.
До публикации подставьте самый длинный заголовок из CMS. Вместо короткого «Аудит» попробуйте «Аудит рекламных кампаний для сети стоматологий». Сузьте окно до 360 пикселей, раскройте подробности и пройдите по странице клавишей Tab. Если фокус перескакивает через видимый блок, проверьте порядок элементов в разметке.

Плюсы, ограничения и выбор фреймворка

Преимущество бенто хорошо видно на странице колонки: и общий вид, и тип разъёма можно рассмотреть в одном блоке. За это приходится платить местом. У каждой плитки свои поля, и на телефоне после четырёх-пяти карточек расстояние от названия товара до следующего раздела уже ощутимо. Особенно жалко тратить экран на отдельную плитку с одним словом «Качество», когда рядом можно показать кнопки управления крупным планом.

В проекте на Bootstrap 5.3 я бы сохранил привычный контейнер, а для самого блока задал display: grid. Стандартные ряды Bootstrap построены на Flexbox. Для композиции, где одна карточка занимает высоту двух соседних, у CSS Grid есть прямое правило grid-row: span 2.
Если команда уже пишет на Tailwind, четыре колонки задаёт класс grid-cols-4, а ширину карточки в две колонки — col-span-2. В Bulma для заданного числа колонок есть fixed-grid. Подключать любой из трёх фреймворков ради одного такого блока смысла мало: в примере ниже всю перестройку выполняет один медиазапрос.

Пример бенто-сетки с html-кодом: главная страница рекламного агентства

У вымышленного агентства «Спектр» четыре карточки. Слева — кейс стоматологии, справа вынесена стоимость первой записи на приём. Одну цифру легко принять за обещание клиенту, поэтому рядом с кейсом можно раскрыть расчёт: за апрель потратили 96 000 рублей и получили 48 записей. Все числа в примере учебные.

Откройте рабочий пример и сузьте окно. При ширине меньше 760 пикселей карточки идут одна под другой. Расчёт открывается по нажатию на «Посмотреть расчёт». За раскрытие отвечает штатный элемент details, так что JavaScript здесь не понадобился. Разметка лежит в файле index.html, оформление — в agency.css.