Shorthand syntax
There are a couple of shorthand syntaxes you can use with Grid: one relatively straightforward, one less so. The first one that you’ll probably find most utility for is grid-template.
While shorthand syntaxes can be great, my advice would be to write your grids one property at a time, at least to begin with. When you get confident enough that writing each property and value out individually becomes a chore, take the time to learn the shorthand variant.
With that advice dispensed, let’s look at these two shorthand methods.
grid-template shorthand
This allows you to set grid-template-rows, grid-template-columns, and grid-template-areas in one line.
So, for example, for a grid with two 200 px rows and three 300 px columns, we could write:
grid-template: 200px 200px / 300px 300px 300px;
Or, if you’d rather do it with the repeat function, you could write:
grid-template: repeat(2, 200px) / repeat(3, 300px);
The...