CSS Grid: Minimum row width

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: DEMO Example: simple grid layout
8: DEMO Example: grid layout with header, sidebar, content and footer
Want to learn more? Check out our courses