CSS Grid

Minmax

Often we want a grid item to be flexible, but also have a minimum length. The minmax function can be used in any place a grid length unit is expected.

Syntax

Copy
  grid-template-rows: minmax(100px, 1fr);

minmax takes two arguments: minimum length and maximum length. In the above example the minimum height of the row is 100px and the maximum is one fraction of the available space.

Code example: sidebar layout

In the below example, we have created a very simple sidebar layout where the sidebar is at least 150px wide and maximum one fraction wide. The main body receives 2/3 of the available space.

Copy
.wrapper {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2fr;
  grid-template-rows: 1fr;
}

sidebar

main