Bento Grid vs Maximalism
One arranges many things calmly. The other arranges many things loudly. Both are answers to the same problem: a page that has more than five things to say.
Short answer: Bento controls size — a 4-column grid, one 16px gap, tiles that span one or two columns. Maximalism controls none of that: cards are rotated by a fixed degree each, borders are 2px black, and the palette runs to five colours on purpose.
What actually separates them
Bento is a discipline about proportion. The grid is repeat(4, 1fr) with a gap that never changes, and every tile is a multiple of that unit — one column, or two. Because nothing is rotated, nothing overlaps and the gap is constant, the page reads as one object rather than a set of cards.
Maximalism in this gallery is not random. Each card carries a fixed small rotation (−1.5deg on the hero label, ±1deg on the nav chips), borders are a flat 2px #16130f, and fills come from a five-colour set: butter, mint, pink, lilac, blue. The composition holds only because the rotations are small and repeatable and the palette is capped — remove either and it reads as a broken layout rather than a busy one.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Bento Grid | Maximalism / Collage |
|---|---|---|
| Grid | ● 4 columns, 16px gap, spans of 1 or 2 | No grid; blocks are rotated and stacked |
| Rotation | None | ● −1.5deg to +1deg, fixed per element |
| Palette | White, #eef1ea, #31353d — three fills | ● Five bright fills on #16130f ink |
| Border | 1px low-contrast hairline | ● 2px solid #16130f |
| Corner | 10px to 18px, identical on every tile | 0 everywhere |
| Headline | Single tile carries the claim at 1.7rem | ● clamp(2.4rem, 7vw, 4.6rem), max 15ch |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Bento Grid | Maximalism / Collage |
|---|---|---|
| Layout | grid-template-columns: repeat(4, 1fr); gap: 16px |
no grid; transform: rotate(-1.5deg) per block |
| Fill | background: #ffffff / #eef1ea / var(--ink) |
background: #ffd166 / #9be7c4 / #ff9fb2 / #dcc6ff |
| Border | border: 1px solid var(--line) |
border: 2px solid #16130f |
| Radius | border-radius: 10px to 18px |
border-radius: 0 |
When each one wins
Bento Grid wins when
- The page must show six or more capabilities without becoming a wall of cards
- There is genuinely different weight in the content — one claim, three features, one number — that spans can express
- The brand is quiet and the page has to stay readable for several minutes
Maximalism / Collage wins when
- The page is a poster, a campaign or a portfolio opening, and five seconds is the whole visit
- Each item is meant to feel individually placed, not part of a system
- You can cap the palette and the rotations — without those two limits it collapses into noise
Steering a model to one or the other
Ask for spans and a constant gap and you get Bento; ask for fixed rotations, 2px outlines and five named fills and you get maximalism. The failure mode is a mix: a model asked for a "playful bento" will rotate some tiles, which destroys the one property that makes bento legible — the constant gap between unrotated boxes. If you want playfulness with structure, rotate the label, not the tile.