Apple made it famous. Now every portfolio uses it. Let us break down the CSS Grid magic behind bento layouts and build one from scratch that actually impresses.
Why twelve columns
A twelve-column track divides cleanly into halves, thirds, quarters, and sixths. That gives a handful of card widths that all line up without fractional maths, which is most of what a bento layout needs.
The interest comes from mixing spans deliberately. An eight-and-four split beside two sixes creates rhythm; a page of identical thirds does not, however well built it is.
// Note
Set explicit row spans on the large cards. Left to auto, a tall card stretches its whole row and the grid collapses into stripes.
Collapsing on small screens
Bento layouts are a large-screen idea. On a phone the honest answer is a single column, ordered by importance, with the aspect ratios adjusted so images stay readable rather than becoming letterbox slivers.