{"id":366810,"date":"2022-07-15T06:16:52","date_gmt":"2022-07-15T13:16:52","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=366810"},"modified":"2022-08-26T08:25:55","modified_gmt":"2022-08-26T15:25:55","slug":"grid-auto-rows","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-rows\/","title":{"rendered":"grid-auto-rows"},"content":{"rendered":"\n

The grid-auto-rows<\/code> CSS property is part of the CSS Grid Layout specification<\/a>, specifying the size of the grid rows<\/code> that were created without having an explicit size. In other words, this property sets the size of implicit rows<\/a> and any other rows that have not been explicitly sized in the grid-template-rows<\/code><\/a> property.<\/p>\n\n\n\n\n\n\n\n

.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\"\n                       \"media detail detail\";\n  grid-template-rows: 200px;\n  grid-auto-rows: 150px;\n}<\/code><\/pre>\n\n\n\n
That example creates a grid container with two rows defined by grid-template-areas<\/code>. The first row has an explicit size set by grid-template-rows<\/code>, but not the second row. This is where grid-auto-rows<\/code> kicks in and sets that row\u2019s size to 150px<\/code>.<\/p>\n\n\n
grid-auto-rows<\/code> use cases<\/h3>\n\n\n
As said above, grid-auto-rows<\/code> sets the size of any rows that don\u2019t have an explicit size. Now the question is, what kind of rows don\u2019t have an explicit size? Or, how does a grid create rows without an explicit size?<\/p>\n\n\n\n
Here are some situations where that might come up.<\/p>\n\n\n
Rows that are defined by grid-template-areas<\/code> that have no explicit size set by grid-template-rows<\/code><\/h4>\n\n\n
The first case is the one that we saw at the top of this article. A grid can have an explicit row defined by grid-template-areas<\/code> without having its size set explicitly by the grid-template-rows<\/code> property.<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\"\n                       \"media detail detail\"; \/* 2 rows *\/\n  grid-template-rows: 200px; \/* 1 size *\/\n}<\/code><\/pre>\n\n\n\n
The first row is set to 200px<\/code>, and since the last row is not set to any explicit size, it will be set to auto<\/code>. In this example the second row does not have any content therefore auto<\/code> is equal to zero size.<\/p>\n\n\n\n
\"A
Two row tracks that one of them have an explicit size but not the second one which is set to auto which here is equal to zero. That\u2019s why you don\u2019t see any space between grid line #2 and #3.<\/figcaption><\/figure>\n\n\n\n
If we add the grid-auto-rows<\/code> to the above example we can control the size of the last row too:<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-areas: \"media detail detail\"\n                       \"media detail detail\";\n  grid-template-rows: 200px;\n  grid-auto-rows: 150px;\n}\n\n\/* Make sure grid items expand to the second row *\/\n.grid-items {\n  grid-row: 1\/3;\n}<\/code><\/pre>\n\n\n\n
Now as you can see in the following image, the last row\u2019s size is set to 150px<\/code>:<\/p>\n\n\n\n
\"Two<\/figure>\n\n\n\n
Note that the tracks that don\u2019t have an explicit size are auto<\/code>-sized.<\/p>\n\n\n
Implicit rows are created when there are more grid items than cells<\/h4>\n\n\n
A grid that is defined by the grid-template-columns<\/code>, grid-template-rows<\/code> or\/and grid-template-areas<\/code> is called an explicit grid<\/strong>, meaning that all the grid tracks are a set size. Let\u2019s say, for example, we have six HTML child elements in a parent grid container, and we explicitly define three columns and two rows in the grid.<\/p>\n\n\n\n
.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(2, 100px);\n}<\/code><\/pre>\n\n\n\n
We have implicit grid tracks for those columns and rows because there\u2019s no sizing information. Only the number of columns and the number of rows.<\/p>\n\n\n\n
One situation where you\u2019ll find implicit rows is when there are more grid items than there are defined rows. Imagine in our last example that we now have more than 6 HTML elements. We previously set up three columns and two rows, so there are exactly 6 cells in the grid \u2014 the perfect amount for our 6 elements. But with more than 6 elements, we suddenly have an overflow problem, right?<\/p>\n\n\n\n
Not at all! CSS Grid\u2019s auto-placement algorithm<\/a> creates additional rows or columns to hold the extra items. Those extra columns and rows are called implicit tracks<\/strong>.<\/p>\n\n\n\n
By default, the auto-placement algorithm creates row tracks to hold extra items, so our grid is capable of holding everything, no matter how many items we toss at it.<\/p>\n\n\n\n
However, the implicit rows are sized automatically based on their content. That\u2019s why grid-auto-rows<\/code> is so useful \u2014we can give all of those rows a size and CSS Grid will stop filling rows when it reaches the last element.<\/p>\n\n\n\n
Say we size those implicit grid rows to 150px<\/code>:<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(2, 100px);\n  grid-auto-rows: 150px;\n}<\/code><\/pre>\n\n\n\n
Now, no matter how many implicit rows get created, they will all have their size set to 150px<\/code>.<\/p>\n\n\n\n
\"A
The explicit grid is marked with a solid line and the implicit one is marked using a dotted line.<\/figcaption><\/figure>\n\n\n
Implicit rows are created when we position an item outside of the explicit grid<\/h4>\n\n\n
Another scenario where the grid-auto-rows<\/code> property comes in handy is when implicit tracks are created when we position an item outside of the explicit grid. The implicit tracks are automatically created to make a place for that item.<\/p>\n\n\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: 150px 150px 150px; \/* 3 explicit columns *\/\n  grid-template-rows: 150px; \/* 1 explicit row *\/\n  grid-auto-rows: 150px; \/* Size of the implicit rows *\/\n}\n\n.grid-item:last-child {\n  grid-column: 5;\n  grid-row: 3; \/* Placed in 3rd row in a 1-row grid *\/\n}<\/code><\/pre>\n\n\n\n
So what we did there was set the last .grid-item<\/code> child in the third row\u2026 but there is no third row in our one-row grid! That puts the last grid item outside the explicit grid, which creates two implicit row tracks. Even though those rows were created for us, we can set them to 150px<\/code> using the grid-auto-rows<\/code> property.<\/p>\n\n\n\n
\"\"
Positioning the last child into the third row of a one-row explicit grid causes two implicit row tracks. We set those rows size to 150px<\/code> using the grid-auto-rows<\/code> property.<\/figcaption><\/figure>\n\n\n
Syntax<\/h3>\n\n\n
grid-auto-rows: <track-size>+<\/code><\/pre>\n\n\n\n
\n  \n          Full definition      <\/summary>\n  \n\n
where\n<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )\n\nwhere\n<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto\n\nwhere\n<length-percentage> = <length> | <percentage><\/code><\/pre>\n\n\n<\/details>\n\n\n