Bento Grid Layout

Officialby Cube Burst Studios

A responsive bento-box feature grid (hero, wide and tall tiles) that collapses neatly to two and then one column.

⬇ Download ZIP 1.9 KB

Category: Web Dev
File: bento-grid.zip
Size: 1.9 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #grid #layout #bento #responsive

⚑ Report this

A responsive bento-box feature grid (hero, wide and tall tiles) that collapses neatly to two and then one column.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

component.css

/* Bento Grid Layout · Cube Burst Studios · CC0
   <div class="bento"><div class="tile tile--hero">…</div><div class="tile tile--tall">…</div><div class="tile">…</div>…</div>
   Modifiers: tile--hero (2x2), tile--wide (2x1), tile--tall (1x2). Collapses to 2 then 1 column. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 16px; }
.tile {
	position: relative; overflow: hidden; padding: 22px; border-radius: 24px; background: #fff;
	border: 1px solid #e8e4f3; box-shadow: 0 1px 2px rgba(20,10,60,.06), 0 8px 24px rgba(20,10,60,.06);
	display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20,10,60,.08), 0 18px 40px rgba(20,10,60,.12); }
.tile h3 { margin: 0; font: 700 20px/1.2 system-ui, sans-serif; }
.tile p { margin: 0; font: 400 15px/1.45 system-ui, sans-serif; color: #5b5470; }
.tile--hero { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile--hero, .tile--wide { grid-column: auto; } .tile--hero, .tile--tall { grid-row: span 1; } }