CSS Grid Sizing Demo: fr vs auto vs fixed

The fr (fraction) unit distributes remaining free space proportionally among tracks, ignoring content size. auto sizes the track based on its content — the largest item in that column determines the width. When you use 1fr 1fr, both columns get equal shares of available space. With auto auto, column widths depend entirely on what's inside them.

Use fixed pixels when you need precise control — like a sidebar that must be exactly 250px, or an image gallery thumbnail area. Use fr for flexible layouts that should adapt to the viewport. A common pattern is 250px 1fr — a fixed sidebar with a fluid content area. Fixed values can cause overflow on small screens; fr values always stay within the container.

minmax(min, max) sets a range for a track. For example, minmax(100px, 1fr) means the column will be at least 100px wide, but can grow to fill available space. minmax(auto, 1fr) uses the content size as the minimum. This combines the best of both worlds — content-awareness from auto and flexibility from fr. It's especially useful in responsive layouts to prevent columns from becoming too narrow.

When content is wider than a fixed pixel column, it will overflow by default (visible overflow). You can control this with overflow: hidden, overflow: auto (scroll), or word-break: break-word. With fr units, the column can grow within available space. With auto, the column expands to fit the content. Fixed columns require careful handling of overflow edge cases.

Absolutely! A common real-world example is 200px 2fr 1fr auto — a fixed sidebar, a main content area that's twice as wide as the secondary column, and an auto-sized column for metadata or icons. CSS Grid is designed for this kind of mixed sizing. The browser first allocates space to fixed and auto tracks, then distributes the remainder among fr tracks.

The gap property consumes space before fr units are calculated. For example, with grid-template-columns: 1fr 1fr 1fr and gap: 20px on an 800px container, the browser subtracts 40px (2 gaps × 20px) first, leaving 760px to be divided among the three 1fr tracks (≈253px each). Understanding this order of operations is key to precise layout design.

When all items in a row have the same minimal content width and the container has extra space, auto tracks may appear evenly distributed — similar to 1fr. The difference becomes clear when you change content lengths or resize the container. Try the "Content-Driven" scene above to see how varying content lengths reveal the true nature of auto sizing.

Use repeat(auto-fit, minmax(250px, 1fr)) for responsive card grids — this automatically creates as many columns as fit, each at least 250px wide and sharing remaining space equally. For page layouts, use a combination like minmax(0, 1fr) minmax(0, 3fr) for a sidebar + main content ratio. Always test on multiple screen sizes and use media queries to adjust grid-template-columns for major breakpoints.