LinkBento

CSS grid layouts

Bento grid generator

Arrange tiles of different sizes on a CSS grid, see how they collapse on tablets and phones, and copy plain HTML and CSS with no framework attached.

1 Layout

Start from

Click a tile to edit it. Drag tiles to reorder them, or use Move earlier and Move later.

Selected tile

Width (columns)
1
Height (rows)
1

2 Grid settings

Tablet

Phone

3 Code

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  grid-auto-flow: row dense;
  gap: 16px;
  max-width: 1120px;
  margin-inline: auto;
}
.bento__tile {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
  background: #f1efe9;
  color: #121212;
}
.bento__tile--c2 { grid-column: span 2; }
.bento__tile--r2 { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__tile--c2 { grid-column: span 1; }
  .bento__tile--r2 { grid-row: span 1; }
}

How to build a bento grid

Pick a starting layout, then click any tile to rename it or change how many columns and rows it spans. Drag tiles to change their order; the Move buttons do the same from the keyboard. Switch between Desktop, Tablet and Phone to see the layout at each breakpoint.

  • Columns and row height set the grid. Rows use minmax(height, auto), so a tile grows instead of cutting off text.
  • Tablet and phone settings add media queries. Tiles wider than the smaller grid shrink to fit it, so nothing overflows.
  • Fill gaps automatically lets the browser pull smaller tiles up into holes. It can change the visual order, so keep it off when the reading order matters.

The export is a div with one child per tile and span classes like bento__tile--c2. Put your own content inside the tiles and restyle the background, padding and colours to suit. For a ready-made link-in-bio page laid out this way, try the bento link-in-bio builder.

Grid questions

Does the generated CSS work in all browsers?

Yes. It uses CSS grid with repeat(), minmax(), span and media queries, which every current browser supports. No container queries or JavaScript are needed.

How do I keep the order accessible?

Screen readers and keyboard users follow the order of the HTML, not the picture. Arrange the tiles in reading order here, and leave dense packing off if it would move tiles out of that order.

Is my layout saved?

The last layout is kept in this browser's local storage so it is there when you come back. It is never uploaded.