free tools runs in this tab no account, no upload
free tool
Grid columns
What grid-template-columns gives me columns that wrap on their own?
The declaration for a grid that reflows without a media query, plus the width each column gets at three viewport sizes, so you see where it drops to fewer.
The quick brown fox jumps over the lazy dog, at the size body text is
actually set.
260px minimum
auto-fit collapses empty tracks; auto-fill keeps them, which leaves a gap at the end.
ready to paste
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
- at 480px wide 480px each 1 column
- at 900px wide 289.33px each 3 columns
- at 1440px wide 275.2px each 5 columns
- a fixed count instead repeat(3, minmax(0, 1fr))
how to use it
- Set the smallest a column may get and the gap between them.
- Copy the auto-fit declaration - it wraps without a single breakpoint.
- Check the resolved rows to see how many columns each width really gets.
what this page cannot do
This is the declaration. The extension draws the real grid over the live page - line numbers, named areas, the gaps - so you can see which track an item actually landed in.
Grid in the panel Where are this layout’s columns actually falling?
Add
LoupeKit
- opens the list of browsers it can be installed in
no host permissions · the reading is free