gridsAndBento
Shortest column masonry
columns: 4 is one line of CSS and the wrong answer for ordered content: it fills the first column entirely before starting the second, so item one and item two end up stacked instead of side by side. The correct fill is a greedy pass placing each piece in the shortest column, and that requires knowing the heights BEFORE laying out.
See it live and copy its promptWhat you can adjust
- Background
- Card color
- Text color
- Head color
- Column count
- Spacing
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
