How to span an image across multiple grid items using grid-template-areas?

Question

I am currently setting up grid for my website that is supposed to hold content of different sizes in specific grid cells, but I cannot figure out how to make eg images span multiple grid cells without messing up the page.

I had to redesign the way I set up my site due to my previous method of manually placing items in html not being responsive. I tried to add classes akin to class="threebythree" and then give that class a min-width and min-height in css. This somehow resulted in additional columns being added to the grid even when the classes were not in use.

<div class="gridcontainer">
    <div class="grid grid1 header">
        <img src="images/headergraphic.svg" alt="Header graphic" class="title">
    </div>
    <div class="grid grid2"></div>
    <div class="grid grid3"></div>
    <div class="grid grid4"></div>
    <div class="grid grid5"></div>
    <div class="grid grid6"></div>
    <div class="grid grid7"></div>
    <div class="grid grid8"></div>
    <div class="grid grid9"></div>
</div>


.gridcontainer {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1px;
    grid-auto-flow: row;
    position: relative;
    top: 0;
    width: 90vw;
    height: 100%;
    margin: auto;
    overflow: hidden;
    max-width: 1800px;
    background-color: transparent;
    z-index: 6;
    grid-template-areas: 
        "head head head . . ."
        "head head head . . ."
        "head head head . . ."
        ;
}
.grid {
    position: relative;
    /* Limits the size of the grid and resizes based on viewport size */
    height: calc(90vw / 6);
    max-height: 300px;
    width: calc(90vw / 6);
    max-width: 300px;
    background-color: transparent;
    z-index: 100;
    left: 1px;
}
.header {
    grid-area: head;
    background-color: blue;
}
.title {
    grid-area: 1 / 1 / 3 / 3;
}

I expected the headergraphic (or at least the background-color) to span a 3x3 space of a 6 column grid, but instead its being limited to the first grid cell. Here is my current result, what I expected and the idea for the end layout: https://i.sstatic.net/klJMx.jpg

Answer 1

This is due to the limitation of width/height you apply to the grid item. You can use not() to avoid this on the header or simply remove grid class.

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1px;
    grid-auto-flow: row;
    position: relative;
    top: 0;
    width: 90vw;
    height: 100%;
    margin: auto;
    overflow: hidden;
    max-width: 1800px;
    background-color: transparent;
    z-index: 6;
    grid-template-areas: 
        "head head head . . ."
        "head head head . . ."
        "head head head . . ."
        ;
}
.grid:not(.header) {
    position: relative;
    /* Limits the size of the grid and resizes based on viewport size */
    height: calc(90vw / 6);
    max-height: 300px;
    width: calc(90vw / 6);
    max-width: 300px;
    background-color: transparent;
    z-index: 100;
    left: 1px;
    box-shadow:0 0 2px #000 inset;
}
.header {
    grid-area: head;
    background-color: blue;
}
.title {
    grid-area: 1 / 1 / 3 / 3;
}

<div class="gridcontainer">
    <div class="grid grid1 header">
        <img src="images/headergraphic.svg" alt="Header graphic" class="title">
    </div>
    <div class="grid grid2"></div>
    <div class="grid grid3"></div>
    <div class="grid grid4"></div>
    <div class="grid grid5"></div>
    <div class="grid grid6"></div>
    <div class="grid grid7"></div>
    <div class="grid grid8"></div>
    <div class="grid grid9"></div>
</div>