[CSS] Specify grid columns, rows, and areas at once with the grid-template shorthand

We can specify grid columns, rows, and areas in one property using the grid-template shorthand.

 

        .container {
            display: grid;
            height: 100vh;
            grid-gap: 10px;
            grid-template-areas:
                "nav-1 nav-2 nav-3"
                "main main nav-3";
            grid-template-columns: 2fr auto 1fr;
            grid-template-rows:
                [nav-start] 1fr
                [nav-end main-start] 5fr
                [main-end];
        }

 

The same as:

        .container {
            display: grid;
            height: 100vh;
            grid-gap: 10px;
            grid-template:
                [nav-start] "nav-1 nav-2 nav-3" 1fr [nav-end]
                [main-start] "main main nav-3" 5fr [main-end]
                / 2fr auto 1fr;
            /*
                [named grid row line start] "area1 area2 ..." 1fr [named-grid-line end]
            */
        }