The Minimum Content Size In CSS Grid

Ahmad recently encountered an issue where a CSS Grid column grew too large:

.wrapper {
    display: grid;
    grid-template-columns: [main] 1fr [aside] 16em;
    grid-gap: 2em;

The main column has a 1fr value. That means it will take the available space minus the sidebar and the gap. However, the minimum content size of a grid item is min-content. That means a grid item can expand its width due to long content (In our case, a nested scrolling container).

Coincidentally, this is exactly what Chris wrote about on CSS-Tricks earlier this week. The fix is to use minmax(0, 1fr), so that the minimum content size won’t be min-content, preventing this “Grid Blowout”.

The Minimum Content Size In CSS Grid →
You want minmax(10px, 1fr) not 1fr

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.