02G. Save Time with the grid-template Shorthand
Less than 1 minute
02G. Save Time with the grid-template Shorthand ๊ด๋ จ
Mastering CSS Grid | Colt Steele
Learn web development with Colt Steele
Save Time with the grid-template Shorthand | Colt Steele
So far we've been defining rows and columns manually. The `grid-template` shorthand allows us to define both at once.
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 simplest way is to provide a list of rows followed by a slash and then a list of column values.
Say we want five 200px rows, and two 500px columns.
The CSS would look like this:
