Bento grid
A responsive bento pattern with original CSS.
01 / Lead with the job
The largest tile earns its space by explaining the main benefit.
02 / Show proof
Short, specific supporting content.
03 / Keep the order
One column on a phone.
How to build
Present features in a compact editorial grid that still reads logically on a phone.
Place the most useful feature first in source order. Let CSS create visual hierarchy at wider widths; return to one column on small screens. Avoid putting important copy in decorative backgrounds.
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bento > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 42rem) { .bento { grid-template-columns: 1fr; } .bento > :first-child { grid-column: auto; grid-row: auto; } }