use UI

Bento Grid vs Carousel

Both arrange a set of items in fixed space, and they pay for it differently. A carousel buys room by hiding: one item is on the page and the rest are behind an action most people never take, which makes “what is on slide three” a question with no reliable answer. A bento grid buys room by ranking: everything stays visible and importance is carried by area. The carousel is right when the items are a genuine sequence someone came to step through — several views of one product. It is wrong when the items compete, because then hiding them is just an unresolved argument about what should come first.

A sequence the user steps through can be a carousel. A set that should all be seen is a grid.

Bento Grid

A grid of unequal cells where each cell's size signals its relative importance.

Reach for it when

  • A set of features, metrics or highlights should all be visible without interaction.
  • The items are genuinely unequal, and the biggest one deserves to be read first.
  • The page is being scanned rather than read — a landing section, a dashboard, an overview.

Avoid it when

  • The items are equal. Unequal boxes then claim a hierarchy that does not exist, and readers spend effort deciding it does not matter.
  • There are more than about eight cells. Past that the sizes stop reading as ranking and start reading as noise.
  • The content is a list to compare item by item. Aligned rows beat an artful mosaic every time.

Carousel

A component showing one item from a set at a time, with controls to move between them.

Reach for it when

  • The items are a real sequence the user steps through — photos of one product, pages of a tour, frames of a story.
  • Space is genuinely constrained and the items are equivalent, so seeing one at a time loses nothing.
  • The user came to browse this set. A gallery someone opened on purpose is not the same as a banner they scrolled past.

Avoid it when

  • The slides compete rather than continue — three unrelated promotions taking turns in the same box. Beyond the first, they are rarely seen at all.
  • The content matters. Anything a user must find should not depend on them pressing an arrow.
  • You are using it to settle an argument about what goes at the top. A carousel does not resolve that disagreement, it hides it.