Grid, bento, masonry
Auto-fit grids with a φ⁶ minimum, dense bento spans, and CSS-columns masonry.
Examples
Grid
a
b
c
d
Bento
12,480Active users
98.2%Uptime
+12.4%
Conversion
Wide card
Masonry
a
b
c
d
e
f
Anatomy
.grid | Auto-fit grid: as many equal columns of at least --min as fit, never wider than the container. |
.bento | Auto-fit grid of φ⁵ cells with dense packing: later items fill holes left by wide ones. |
.bento > [data-span] / [data-rows] | Optional spans on a cell. Under 48rem every cell drops back to one. |
.masonry | CSS columns of at least --min. Items flow down the first column, then the next, and never break across two. |
API
| Attribute | Values | Description |
|---|---|---|
--minon .grid | <length> | Minimum column width. Default φ⁶ ≈ 18rem. |
--minon .bento | <length> | Minimum cell width and row height. Default φ⁵ ≈ 11rem. |
--minon .masonry | <length> | Minimum column width. Default φ⁶ ≈ 18rem. |
data-span | 23 | On a .bento child: spans that many columns. |
data-rows | 2 | On a .bento child: spans two rows. |
Accessibility
- Masonry fills top to bottom, column by column, so the eye scans across while reading and tab order go down. Use it for items whose order doesn't matter.
- Bento's dense packing can move a later item into an earlier hole, so the visual order may not match the tab order. Keep focusable cells in an order that still makes sense.