Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Advanced Grid Track Sizing with minmax() and auto

The minmax() function and the auto keyword allow you to create responsive grids where elements grow and shrink dynamically.

minmax() Function:

The minmax() function defines a minimum and maximum size for grid tracks. This is particularly useful when you want to create flexible columns that shrink down but don’t get too small.

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

In this example:

• The grid creates 3 columns.
• Each column has a minimum width of 200px and can grow to take up the remaining space (1fr).

auto Keyword:

The auto keyword sizes a grid track based on the content inside. This allows you to create tracks that adjust to the size of their content.

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

In this example:

• The first column is 200px.
• The second column is as wide as its content.
• The third column takes up the remaining space.