CSS Grid minmax() Function

CSS Grid minmax() Function

The CSS minmax() function defines a size range for a Grid track by setting its minimum and maximum size.

Using minmax() allows a column or row to grow and shrink within specified limits. It is especially useful for flexible and responsive Grid layouts.

How minmax() Works

The minmax() function accepts two values: a minimum track size and a maximum track size.

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

The first column has a minimum size of 200 pixels and a maximum flexible size of 1fr. The second column also uses one fraction of the available flexible space.

The basic syntax is:

minmax(minimum, maximum)

The browser sizes the track within this range according to the available space, content, and Grid track sizing rules.

Fixed Minimum and Maximum Sizes

Both limits can use fixed lengths.

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 300px) 1fr;
}

The first column can grow from 150 pixels up to 300 pixels. Its final size depends on the Grid layout and available space.

The minimum should not be larger than the maximum. When the maximum is smaller than the minimum, the maximum is ignored and the function is treated according to the minimum.

minmax() with fr Units

A common Grid pattern uses a fixed or content-based minimum with a flexible maximum.

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

The first track should not become smaller than 200 pixels under normal track sizing, but it can grow by participating in the distribution of flexible space.

A flexible fr value can be used as the maximum of minmax(), but not as its minimum.

/* Valid */
minmax(200px, 1fr)

/* Invalid */
minmax(1fr, 300px)

minmax() with auto

The auto keyword can be used with minmax() to allow content and the Grid sizing algorithm to influence a track's size.

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
}

The first track has a minimum of 150 pixels while its maximum uses auto.

The exact result can depend on the track's content, the size of the grid container, and alignment behavior.

Intrinsic Track Sizing

Intrinsic sizing keywords such as min-content and max-content can be used with minmax().

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
}

The first track uses its minimum intrinsic content size as its lower limit and 300 pixels as its upper limit.

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
}

Here, the first track has a 150-pixel minimum while its maximum can be influenced by the preferred intrinsic size of its content.

Intrinsic sizing is useful when a track needs to respond to its content rather than relying only on fixed dimensions.

minmax() with repeat()

The minmax() function is often combined with repeat() to apply the same sizing range to several tracks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

This creates three columns. Each column has a minimum track size of 150 pixels and can grow using flexible space.

Without repeat(), the equivalent declaration would be:

.grid-container {
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(150px, 1fr)
    minmax(150px, 1fr);
}

Responsive Grids with minmax()

One of the most useful Grid patterns combines repeat(), auto-fit, and minmax().

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

The browser creates as many columns as can fit while keeping each track at least 200 pixels wide. When additional space is available, the tracks can expand using 1fr.

As the container becomes narrower, fewer columns fit on each row. This can create a responsive Grid without requiring a media query for every change in column count.

The next tutorial compares auto-fit and auto-fill in detail.

Using minmax(0, 1fr)

A flexible Grid track has an automatic minimum size when written as 1fr, which can allow some content to prevent the track from shrinking as much as expected.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

When a track must be allowed to shrink below its automatic content-based minimum, you can explicitly set its minimum to zero.

.grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

This allows both flexible tracks to shrink to zero if necessary. Content may then overflow unless its own sizing or wrapping behavior is also handled appropriately.

minmax() Guidelines

Choose the minimum and maximum values according to how much flexibility the layout requires.

For responsive card-style layouts, minmax() is commonly combined with repeat() and either auto-fit or auto-fill.

CSS Grid minmax() Example

The following example compares fixed Grid tracks with tracks that use minmax().

.fixed-grid {
  grid-template-columns: repeat(3, 150px);
}
.minmax-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

Open the example in the editor and change the minimum value or replace 1fr with another maximum value to see how the tracks respond.