.pagewrapper {
    min-height: calc(100vh - 4rem);
    margin: 2rem;
    display: grid;
    grid-template: 
    "header header header"
    "layout1 layout2 layout3" 1fr
    "layout4 layout5 layout6" 1fr
    / 1fr 1fr 1fr;
    gap: 2rem;
}
.pagewrapper div div {
    background-color: orange;
    font-size: .6rem;
}
h1 {
    grid-area: header;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}
h2 {
    font-size: 1.5rem;
    font-weight: bold;
}
.layout1 {
    grid-area: layout1;
    display: grid;
    grid-template: 
    "header header header"
    "nav nav nav" 2rem
    "head head head" 2rem
    "aside1 main aside2" 1fr
    "foot foot foot" 2rem
    / 4rem 1fr 4rem;
    gap: .5rem;
}
.layout2 {
    grid-area: layout2;
    display: grid;
    grid-template: 
    "header header header header"
    "nav head head head" 2rem
    "nav aside1 main aside2" 1fr
    "nav foot foot foot" 2rem
    / 4rem 4rem 1fr 4rem;
    gap: .5rem;
}
.layout3 {
    grid-area: layout3;
    display: grid;
    grid-template:
    "header header header header"
    "nav aside1 head aside2" 2rem
    "nav aside1 main aside2" 1fr
    "nav aside1 foot aside2" 2rem
    / 4rem 4rem 1fr 4rem;
    gap: .5rem;
}
.layout4 {
    grid-area: layout4;
    display: grid;
    grid-template:
    "header header header"
    "head head head" 2rem
    "aside1 main nav" 1fr
    "aside1 aside2 nav" 2rem
    "foot foot foot" 2rem
    / 4rem 1fr 4rem;
    gap: .5rem;
}
.layout5 {
    grid-area: layout5;
    display: grid;
    grid-template:
    "header header header header header header"
    "head head head nav nav nav" 2rem
    "main main main main aside1 aside1" 1fr
    "aside2 aside2 aside2 aside2 aside2 aside2" 2rem
    "foot foot foot foot foot foot" 2rem;
    gap: .5rem;
}
.layout6 {
    grid-area: layout6;
    display: grid;
    grid-template:
    "header header"
    "head head" 2rem
    "main nav" 1fr
    "aside1 nav" 2rem
    "aside2 nav" 2rem
    "foot foot" 2rem
    / 1fr 4rem;
    gap: .5rem;
}

.header2{
    grid-area: header;
}
.nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head {
    grid-area: head;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aside1 {
    grid-area: aside1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main {
    grid-area: main;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aside2 {
    grid-area: aside2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot {
    grid-area: foot;
    display: flex;
    justify-content: center;
    align-items: center;
}