grid-template

The grid-template property is shorthand for defining the grid rows, columns, and areas. The css declaration may contain up to three values separated by a backslash '/' in this example (grid-template: 100px 1fr/ 50px 1fr/autos;). The grid-template is how you set up the overall grid structure using row and column values. The shorthand combines all the values in the same declaration using grid-template-rows / grid-template-columns / grid-area together. These shortcuts save valuable time and energy in the design process.

grid-row

The CSS grid-row property is a shorthand property that specifies a grid item's size and location within the grid-row by establishing a line, a span, or absolutely nothing to its grid placement.

grid-gap

The grid-gap property is yet another shorthand value the controls the space between grid items in their rows and columns. Just gapalone can be used with a value in pixels or or percentage to establish the size of the gap between the grid's rows and columns, and can be declared with one or two values. If only one value, the gap is applied the same to both rows and columns and if there are two separate values, separated by a comma, the first value is for the row-gap and the second value is for the column-gapvalue applied to each, respectively.

Summary

When using grid properties, there are shorthand properties that may simplify your website design process. Correctly using those shorthand properties such as with gap and grid-template, among many other shortcuts, will save you time and energy when developing your design. The CSS grid is a proven model for website design and has similar qualities that the flexbox model has, however, the dimensional grid model has, I believe, more proportion and balance, along with consistency and order to it. Both models have their advantages in website design for various situations the two models can be utilized on the same page.