Common use case: Have a sidebar that never collapses more than a certain amount of pixels when you resize the window.

Here’s an example where the sidebar takes 1/4 of the screen and never takes less than 200px:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

You can also set just a maximum value using the auto keyword:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

or just a minimum value:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Lessons in this unit:

0:	Introduction
1:	grid-template-columns and grid-template-rows
2:	Setting columns and rows dimensions
3:	Gap between the cells
4:	Span items on multiple columns and/or rows
5:	▶︎ Minimum row width
6:	Layout using grid-template-areas
7:	Example: simple grid layout
8:	Example: grid layout with header, sidebar, content and footer