minmax(): floors and ceilings for tracks

Constrain a track between two sizes

grid-template-columns: minmax(200px, 1fr) minmax(0, 600px);

Each minmax(min, max) track stays between those bounds. Reads as: "this column is AT LEAST min, AT MOST max, otherwise as big as it wants."

Common uses

/* Sidebar that won't shrink below 200px even when window is narrow */
grid-template-columns: minmax(200px, 240px) 1fr;

/* Main that grows but caps at 800px for readability */
grid-template-columns: 240px minmax(0, 800px);

/* All columns at least 280px, max 1fr (fill but never below 280) */
grid-template-columns: repeat(3, minmax(280px, 1fr));

The minmax(0, 1fr) trick

Sometimes a grid item's content forces it WIDER than 1fr should be (e.g. a very long unbreakable URL). To make the column truly elastic regardless of content:

grid-template-columns: 1fr minmax(0, 1fr);

minmax(0, 1fr) says "minimum is 0, so the content can't force you wider." Critical when grid children contain long text or overflow-x content.