Span width of parent div using CSS Grid - css

Question

How do I get my .inner-container divs to span the width and height of the parent content div? codepen
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 40px 40px 40px;
grid-template-areas: "m h h" "m c c" "m f f";
}
.inner-container {
height: 100%;
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto auto;
grid-template-areas: "one two" "three four"
}
.header {
grid-area: h;
background-color: #2b9083;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
grid-area: m;
background-color: #ff66cc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
grid-area: c;
background-color: #66ccff;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
grid-area: f;
background-color: #65704e;
display: flex;
justify-content: center;
align-items: center;
}
.quadrant-one {
grid-area: one;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-two {
grid-area: two;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-three {
grid-area: three;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-four {
grid-area: four;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
width: 100%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-container">
<div class="quadrant-one">I</div>
<div class="quadrant-two">II</div>
<div class="quadrant-three">III</div>
<div class="quadrant-four">IV</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

Answer 1

Set inner container width to 100%, you already have height set correctly.
.inner-container {
width:100%;
}

Answer 2

This will solve your issue:
Just add width: 100%; to .inner-container
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 40px 40px 40px;
grid-template-areas:
"m h h"
"m c c"
"m f f";
}
.inner-container {
height: 100%;
width: 100%;
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto auto;
grid-template-areas:
"one two"
"three four"
}
.header {
grid-area: h;
background-color: #2b9083;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
grid-area: m;
background-color: #ff66cc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
grid-area: c;
background-color: #66ccff;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
grid-area: f;
background-color: #65704e;
display: flex;
justify-content: center;
align-items: center;
}
.quadrant-one {
grid-area: one;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-two {
grid-area: two;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-three {
grid-area: three;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-four {
grid-area: four;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
width: 100%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-container">
<div class="quadrant-one">I</div>
<div class="quadrant-two">II</div>
<div class="quadrant-three">III</div>
<div class="quadrant-four">IV</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Hope this was helpful for you.

Answer 3

.inner-container {
width: inherit;
}