CSS Grid: grid-auto-rows + grid-auto-columns

grid-auto-rows and grid-auto-columns specify the sizing for grid tracks that are generated automatically. The properties come-in really handy when you want to be able to add items that will spill onto new rows/columns, but want to retain some control over the sizing of the implicitly created rows/columns.

Both properties default to a value of auto and they are defined on the grid container (the element with display: grid). Let’s take this example where we define 2 columns and 2 rows, but place items on a 3rd column and a 3rd row:

.container {
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr 100px;

  grid-auto-rows: 125px;
  grid-auto-columns: 1fr;
}

.item-1 {
  grid-column: 3;
}

.item-2 {
  grid-row: 3;
}

We placed our two items outside of the grid we’ve defined so the 3rd column and row are auto-generated, but we control their size with grid-auto-rows and grid-auto-columns. You can see the result below with our item-1 occupying a 1fr column and our item-2 occupying a 125px row:

Item 1
Item 2

See also

✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...