grid-template.css

.a {
    grid-template: 10px repeat(4, 250px 10px) 20px / auto 1fr;
}

.b {
    grid-template:
        [header-left] "head head" 30px [header-right]
        [main-left]   "nav  main" 1fr  [main-right]
        [footer-left] "nav  foot" 30px [footer-right]
        / 120px repeat(4, 250px 10px);
}

@media (min-width: 1000px) {
    .b {
        grid-template:
            [header-left] "head" 30px [header-right]
            [nav-left]    "nav"  auto  [nav-right]
            [main-left]   "main" 1fr  [main-right]
            [footer-left] "foot" 30px [footer-right]
            / 1fr;
    }
}

.c {
    grid-template:
        "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
        "sd sd sd mn mn mn mn mn mn" minmax(100px, auto)
        "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
                / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.d {
    grid-template: 10px / 200px;
}

.e {
    grid-template: 10px;
}

.f {
    grid-template:
        "head head"
        "nav main" 20px
        "nav foot"
        / 1fr 1fr;
}

.head {
    grid-area: head;
}

.nav {
    grid-area: nav;
}

.main {
    grid-area: main;
}

.foot {
    grid-area: foot;
}

.hd {
    grid-area: hd;
}

.sd {
    grid-area: sd;
}

.mn {
    grid-area: mn;
}

.ft {
    grid-area: ft;
}