Specify many grid properties at once with the grid shorthand

[00:00] In this example, we have 20 grid items in our container. The container is display grid taking up all the available height and a 20 pixel gutter. Let's specify some grid-template-rows and grid-template-columns for our grid.

[00:15] To do that, we're going to use the grid property, which is a shorthand property. We're going to explicitly declare two rows and two columns, and the remaining rows and columns will be implicitly set.

[00:28] The first row will be 3fr, the second will be 14fr. The first column will be 4fr, the second column will be 2fr. There we have our grid-template-rows and grid-template-columns.

[00:40] This is the first row, which is 3fr, and this is the second row, which is 14fr. This is the first column, which is 4fr, and the second column 2fr. Using the grid shorthand property in this way allows us to specify grid-template-rows and grid-template-columns in one declaration.

[01:00] We can do more there as well. All our rows here are being implicitly set because we've only been explicit about the first two rows. Let's have it so that our grid-auto-flows. Now using auto-flow, we're actually setting grid-auto-rows.

[01:21] Now we've got 3fr, 14fr, 3fr, 14fr, etc. We could do the same thing for our columns. Now, we have two explicit rows 3fr and 14fr. Our columns are auto flowing, 4fr, 2fr, etc.

[01:40] If we specify auto-flow for either of the two things that we're passing to grid, then it sets them as grid-auto-rows or grid-auto-columns. It will also set grid-auto-flow to either row or column depending on where we place it in the grid shorthand.

[02:01] If we inspect this, now we can see our grid-template-rows set, and our grid-auto-columns set. The grid-auto-flow property is set to column. Now the items in our grid are rendering in a column direction instead of the default row, the grid-template-columns are set to initial.

[02:24] If we removed auto-flow, then we'd have grid-template-rows and grid-template-columns back. Therefore, grid-auto-columns and grid-auto-flow go back to initial. We can also use the dense keyword for auto-flow using this grid shorthand property.

[02:43] To demonstrate that, let's target one of our grid items here. We'll tell it to span three rows. Now our second grid item is spanning three rows. We'll set auto-flow so that we have some grid-auto-columns.

[03:03] We notice that there's a gap here. If we wanted to fill the gap with grid items that come later we could use dense. Now, the gap is over here because we're filling this space with items that fit inside it. An important thing to note about this grid shorthand property is that it initializes some properties for us. Two of those are grid-column gap and grid-row gap, which were our gutter properties.

[03:37] If we move this up above the grid property, then we wouldn't get our gutter, because it's being set to initial by the grid shorthand. The same can be set for some other values here unless we override them ourselves with the values that we set using the grid shorthand.

[03:57] Having said that, we can't actually set grid-column gap, grid-row gap, or grid-template areas to anything else using the grid property. It will simply set them all to initial.