Overview
A starter-kit generator for bento grid layouts, the dashboard style of mixed-size tiles in a tight grid. Two sliders set the column count from 2 to 4 and the gap from 8 to 32 pixels, a live mock dashboard shows the arrangement, and the output emits the grid container rules plus hero and wide tile classes with a mobile collapse media query.
How It Works
Drag the columns slider between 2 and 4 and the gap slider between 8 and 32 pixels. The preview renders a fixed mock dashboard: one double-size hero tile spanning two columns and two rows, plus smaller tiles filling the remaining cells, so you can see how the spans behave at each column count. Copy CSS emits the .bento-grid container with repeat(N, minmax(0, 1fr)) tracks, the .bento-tile-hero and .bento-tile-wide span rules, a base tile style, and a 768 pixel media query that collapses everything to one column.
Step-by-Step Usage Guide
- Choose the column count and gap.
- Watch the mock dashboard rearrange.
- Copy the bento grid CSS.
- Replace the hardcoded dark tile styling with your own surface colors.
Technical Specifications & Standards
The track definition repeat(N, minmax(0, 1fr)) rather than repeat(N, 1fr) is deliberate: 1fr is shorthand for minmax(auto, 1fr), and the auto minimum lets long unbreakable content, such as a wide code line or URL, force the track wider and break the grid. Clamping the minimum to 0 keeps every track equal regardless of content. The hero tile spans both axes with grid-column: span 2 and grid-row: span 2, and the wide tile spans two columns only; both reset to span 1 inside the 768 pixel media query, where the container drops to a single track. The base tile styling in the output is hardcoded to a dark theme: #18181b background, 20 pixel radius, a 10 percent white border and a deep shadow. Recolor those values to match your own surface; the layout rules do not depend on them.
Targeted Use Cases
- Feature overview pages with a large hero tile and supporting stats.
- Dashboard landing views with mixed metric tiles.
- Portfolio grids where one work sample dominates.
- Changelog or roadmap layouts with varied content sizes.
Notes & Gotchas
- Keep minmax(0, 1fr) in the track definition so wide content cannot blow out a column.
- Assign the hero span to the one tile that deserves focus; multiple span-2 tiles fight for space on small grids.
- Recolor the hardcoded #18181b tile base for light themes.
- Test the 768 pixel collapse with real content, since stacked hero tiles need shorter heights.
Frequently Asked Questions
Why does the output use minmax(0, 1fr) instead of plain 1fr?
1fr means minmax(auto, 1fr), and the auto minimum lets unbreakable content widen a track and break the grid. minmax(0, 1fr) forces equal tracks no matter what the content is.
How do the hero and wide tiles differ?
The hero spans two columns and two rows, a 2 by 2 block. The wide tile spans two columns but a single row. Both collapse to single-cell tiles below 768 pixels.
Can I control the tile colors?
Not through the sliders; the emitted tile style is a fixed dark theme with #18181b background and white 10 percent border. Edit those declarations after copying.
What happens on narrow screens?
A media query at 768 pixels switches the container to one column and resets both span classes to single cells, so the grid becomes a simple vertical stack.