CSS minmax(): Flexible Sizing for Grid Tracks
The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.
Why it exists
Static sizing is brittle, and purely flexible sizing can break layouts by making elements too small or too large. minmax() was created for CSS Grid to define a range of acceptable sizes for a track, combining the safety of a minimum size with the flexibility of a maximum size.
The mental model
Think of minmax() as setting guardrails for a grid track's size. You're telling the browser: "This column can grow and shrink, but it must never be smaller than this min value or larger than this max value." It's how you build robust, responsive components that don't break at extreme viewport sizes.
How it works
The function takes two arguments, minmax(min, max), and is used in properties like grid-template-columns. The browser calculates the track size, ensuring it's greater than or equal to min and less than or equal to max. The min value can be a length, percentage, or content-based keyword. The max value can be any of those, plus the flexible fr unit. If the resolved max value is smaller than the min, the max is ignored and the min value is used.
When to use it
Use minmax() for creating responsive column layouts where flexibility is needed but a minimum size must be enforced. It's ideal for sidebars, article text that needs to be readable, or creating a grid of cards that can grow to fill space but shouldn't become too narrow.
When not to use it
minmax() is exclusive to CSS Grid; it cannot be used in Flexbox or other layout modes. Avoid it when a fixed size is truly required. If a column must always be exactly 200px, just use 200px, not minmax(200px, 200px). The most common footgun is using the fr unit for the min argument; it is only valid for max.
One canonical example
The most powerful and common use is creating a responsive grid of items. The declaration grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); tells the browser to create as many columns as will fit. Each column will be at least 250px. Any extra space in the container is distributed equally among the columns, making them grow. As the viewport shrinks, columns automatically wrap to the next line once they can no longer maintain their 250px minimum width.
Interview question
Which statement correctly describes a specific behavior or rule when using the minmax() function in CSS Grid?
- a.The fr unit can be used for both the minimum and maximum arguments of minmax().
- b.It is only effective when both the minimum and maximum values are expressed in fixed pixel units.
- c.If the resolved maximum value is smaller than the minimum, the maximum value is ignored, and the minimum is used.Correct
- d.minmax() is primarily used in Flexbox to define flexible item sizes.
Why? this is the answer
The card states, "If the resolved max value is smaller than the min, the max is ignored and the min value is used." Option A is a common misconception, as the 'fr' unit is only valid for the maximum argument, not the minimum.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles