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 auto. 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 auto, preventing this “Grid Blowout”.

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

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. 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.