Widgets are sized in columns, not pixels
Dashboard widgets are usually specified in grid terms, such as four of twelve columns. The real pixel width is not a simple proportion of that, because the gaps between columns do not scale with it. Nor is it obvious whether three four-column widgets share a row, or how many columns sit empty at the end. This tool derives the column width from your container, columns and gap, then packs your widget list into rows.
How it is calculated
One column is the container width minus the total of the gaps, divided by the number of columns. A widget is its column span times the column width plus the gaps inside that span. Packing fills from the left in the order you entered, dropping to a new row when the remaining columns are too few, and each row takes the height of its tallest widget. The formula is printed under the result. Written as of October 2026.
Limits
No layout is recommended and widgets are never reordered to close gaps. If your column count changes at responsive breakpoints, run the calculation once per breakpoint. CSS output and widgets that span several rows are not supported.
Frequently asked questions
Each row has to add up to exactly the grid column count. On a 12-column grid that means filling a row as 4+4+4 or 8+4. The tool does not reorder widgets for you; it reports what your own order produces.
There is no official number. Twelve is common, but that is convention rather than a standard, so the tool takes the column count from you. If your design system fixes a value, enter that.
No. It calculates the column width, each widget in real pixels, the row packing and the leftover cells. Generating CSS Grid code is handled by a different tool.