Skip to content

Hairline Bento

A bento grid where the gutters are drawn rules, not empty gaps.

Planned — not built yet

A six-column bento that rules its cells off with a single hairline — the container takes the top and left edges, every cell takes right and bottom, so exactly one line lands on every edge at any span with no doubling. The cells carry no fill, no radius and no hover state.

It does not use dense auto-flow, so shapes tile in author order and reading order never separates from visual order. Below the breakpoint it is one honest column.

Details

Stack
React · TypeScript
Licence
Free
Added
11 Sep 2026
Tags
grid, layout, no-deps

Start with a background.

The backgrounds are the most finished corner of the catalogue. Take one and drop it under your own copy.

Browse backgrounds