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 widths each column actually gets at three viewport sizes so you can see where it breaks to fewer columns.

minimum column width gap or a fixed count

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

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

no host permissions · the reading is free