Make a grid area span two rows

Question

This is a very peculiar situation I have never seen before. The first image is my mock-up from Adobe XD and the second is a screenshot of my site from Google Chrome, which shows how the grid is being interpreted by the browser.

As you can see, I have two nav elements: a "sub nav," which provides organizational links; and a "main nav," which provides site links. The CSS id/class naming convention follows, such that:

#header__main-nav and #header__sub-nav are the nav HTML elements; #main-nav__container and #sub-nav__container are the ul HTML elements; .main-nav__item and .sub-nav__item are the li elements; and .main-nav__link and .sub-nav__link are the anchor tags.

I created a grid with ten columns and two rows. The logo, which is intentionally placed to "overflow" out of its parent 'header' element, is to take up an entire first column and the other eight columns are to be split into two rows, each with a nav element. As you can see from the grid outlines, however, that is not happening. The logo is spanning one row of the first column, sharing it with sub-nav and main-nav is in a second row beneath the logo.

Mockup:

Sub-nav highlighted, showing first row size:

Main-nav highlighted, showing second row size and excluding "grid-area: logo":

The CSS:

@media only screen and (min-width: 1101px) {

    /* Mobile-specific style for floating elements left */
    .mobile-only-style {
        float: left;
    }

    /* Grid/Float Declarations */
    #grid__main {
        margin: 0;
        padding: 2vw;
    }

    body {
        font-size: calc(1.5vw + 0.5em);
    }

    #grid__wrapper {
        width: 100vw;
        display: flex;
        flex-flow: column wrap;
    }

    /* Header Styles */
    header#grid__header {
        height: 9vw;
        z-index: 1;
        margin: 0;
        display: grid;
        grid-template-columns: (10, 1fr);
        grid-template-rows: (2, 1fr);
        grid-template-areas:
            "logo logo . . . sub-nav sub-nav sub-nav sub-nav sub-nav"
            "logo logo . . main-nav main-nav main-nav main-nav main-nav main-nav"
    }

    img#header__logo {
        grid-area: logo;
        width: 15vw;
        height: auto;
        margin: 1em 0 0 1em;
        padding: 0;
    }

    /* Navigation Styles */

    /* Main Nav */
    nav#header__main-nav {
        grid-area: main-nav;
        width: calc(75vw - 1em);
        height: 50%;
    }

    ul#main-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin: 0;
    }

    li.main-nav__item {
        height: 50%;
    }

    li a.main-nav__link {
        text-decoration: none;
        font-size: calc(.8vw + 0.6em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-variant-caps: all-petite-caps;
        color: white;
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        -webkit-text-decoration-color: var(--brand-color);
        text-decoration-color: var(--brand-color);
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#main-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

    /* Sub-nav */

    nav#header__sub-nav {
        grid-area: sub-nav;
        height: auto;
        width: calc(75vw - 1em);
        height: 25%;
    }

    ul#sub-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 0;
    }

    li.sub-nav__item {
        height: 25%;
    }

    li a.sub-nav__link {
        text-decoration: none;
        font-size: calc(.5vw + 0.3em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        color: white;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#sub-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }
[...]
}

I tried being more specific with my column sizes and adding a third row, which is to be occupied by only the logo in the first column. Same result--no change.

@media only screen and (min-width: 1101px) {

    /* Mobile-specific style for floating elements left */
    .mobile-only-style {
        float: left;
    }

    /* Grid/Float Declarations */
    #grid__main {
        margin: 0;
        padding: 2vw;
    }

    body {
        font-size: calc(1.5vw + 0.5em);
    }

    #grid__wrapper {
        width: 100vw;
        display: flex;
        flex-flow: column wrap;
    }

    /* Header Styles */
    header#grid__header {
        height: 9vw;
        z-index: 1;
        margin: 0;
        display: grid;
        grid-template-columns: 2fr, 1fr, 6fr, 1fr;
        grid-template-rows: (3, 1fr);
        grid-template-areas:
            "logo . sub-nav ."
            "logo main-nav main-nav main-nav"
            "logo . . ."
    }

    img#header__logo {
        grid-area: logo;
        width: 15vw;
        height: auto;
        margin: 1em 0 0 1em;
        padding: 0;
    }

    /* Navigation Styles */

    /* Main Nav */
    nav#header__main-nav {
        grid-area: main-nav;
        width: calc(75vw - 1em);
        height: 50%;
    }

    ul#main-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin: 0;
    }

    li.main-nav__item {
        height: 50%;
    }

    li a.main-nav__link {
        text-decoration: none;
        font-size: calc(.8vw + 0.6em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-variant-caps: all-petite-caps;
        color: white;
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        -webkit-text-decoration-color: var(--brand-color);
        text-decoration-color: var(--brand-color);
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#main-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

    /* Sub-nav */

    nav#header__sub-nav {
        grid-area: sub-nav;
        height: auto;
        width: calc(75vw - 1em);
        height: 25%;
    }

    ul#sub-nav__container {
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 0;
    }

    li.sub-nav__item {
        height: 25%;
    }

    li a.sub-nav__link {
        text-decoration: none;
        font-size: calc(.5vw + 0.3em);
        font-family: atrament-web, sans-serif;
        font-weight: 700;
        color: white;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    li a#sub-nav__link-active {
        color: white;
        font-size: scale(1.2);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        -webkit-text-decoration-color: none;
        text-decoration-color: none;
    }

Answer 1

Solution

You need to move grid-area: logo from img#header__logo to the a parent.

---

Explanation

You have a misconception about how Grid works, or a coding error, depending on how you see it.

This is your grid HTML:

There are four grid items.

Here's the CSS for the container:

header#grid__header {
    height: 9vw;
    z-index: 1;
    margin: 0;
    display: grid;
    grid-template-columns: calc(15vw + 1em) 9fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: "logo sub-nav" 
                         "logo main-nav";
}

Looks good. The logo is set to span two rows.

The sub-nav grid area is defined correctly:

nav#header__sub-nav {
    grid-area: sub-nav;
    height: auto;
    width: calc(75vw - 1em);
    height: auto;
    margin: 0;
}

The main-nav grid area is defined correctly:

nav#header__main-nav {
    grid-area: main-nav;
    width: calc(75vw - 1em);
    height: auto;
}

However, your logo grid area is missing.

Actually, you've defined the logo grid area on the child of the grid item:

Because the grid area is applied to the child of a grid item, it is out of scope and the rule is ignored. Move the rule to the parent, where it can be seen by the grid container.