Bento grid components for React

A bento grid is a feature section where the cards are deliberately different sizes. That asymmetry is the whole point and also the whole risk, because a grid where every card is equally loud reads as a wall. Decide up front which single card is the hero, give it roughly twice the area of the others, and let the remaining cards be quieter than feels comfortable. If you cannot name the most important card, the grid is a list wearing a costume.

Build the spans with explicit col-span and row-span utilities rather than grid-template-areas unless you genuinely need named regions. Spans are easier to override per breakpoint, which matters because a bento layout almost always needs a different arrangement at the medium breakpoint than at large. The pattern that holds up is a single column on mobile, a two-column pairing in the middle, and your intended asymmetry only at lg and above.

The animated skeletons are the expensive part. Each one is a small scene with its own timers or Motion values, and six of them mounted at once on a page that also has a hero will show up in your interaction latency. Mount them lazily with an IntersectionObserver and stop their loops when they scroll out, and give every card a fixed aspect ratio or min height so the grid does not reflow as illustrations initialise. Layout shift from late-loading cards is the most common bug I see with this pattern.

Keep the DOM order equal to the reading order you want on mobile. It is tempting to reach for order utilities or grid-auto-flow tricks to get a nicer desktop arrangement, and then the screen reader and the phone both get your fourth-most-important card first. Write the markup in priority order and let the spans do the visual rearranging.