Save Time with the grid-template Shorthand
So far we've mostly been setting rows and columns individually, though we have also seen the grid-template shorthand property.
The grid-template property is a shorthand property for setting various aspects of a grid layout, including rows and columns.
There are many ways to use it, but the si
Transcript
0:00 We can set the rows and columns individually, as we've already seen, using grid-template-rows, grid-template-columns, or we can use a shorthand property called grid-template. Now, grid-template is a shorthand property for a whole bunch of things.
0:15 There's many ways of using it. If you look at the documentation on Mozilla Developer Network, it's probably not going to make a lot of sense, what you see here, these letters and keywords. There are many ways of using it. The simplest way of using it is by providing your list of rows, and then a slash followed by your list of column values.
0:36 I actually tend to avoid this personally because I am a simple mind and I forget which one is rows and which one is columns. It doesn't bother me to just write out grid-template-rows and columns. Let's do five rows with two columns.
0:53 I have 1,000-by-1,000 pixels here for the square container. I have to start with the row values. I want five rows, each one should be 200 pixels. Like that. Then a forward slash followed by my column values. I want two columns, each one would then be 500 pixels, assuming I want it to fill up the whole container
1:16 There we are. You can see we have two columns, five rows. It fills up the container because I did the math correctly. Although, of course, if this container changes size, we're going to have some empty space. We'll address some of that very soon and how to make grids that fill a container regardless of its size.
1:34 This is equivalent to instead just doing grid-template-rows, set to that, and then grid-template-columns is set to that. I somehow deleted the other 500-pixel column. Same result. I happen to prefer doing the longhand way when I'm just doing rows and columns. I accept that it's slightly more verbose but easier to understand.
1:58 That's my personal opinion, though. A lot of people use grid-template. Please remember, there's more than one way of using grid-template. We're looking at the simplest. You specify a set of rows, followed by a slash, followed by a set of columns.