What's the best way of using a container in CSS Grid? - html

Question

I want to achieve the following layout in CSS Grid.
Notice how row "C" has a blue background that is full width but the content inside it is wrapped, and not full width. But I don't know what's the most optimal way of achieving this?
So here's my code:
container {
display: grid;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-template-areas:
"A A A A"
". B B ."
"C C C C"
". D D .";
}
What I've tried:
I've tried 16.66% padding to both sides for row "C".
I've tried making the row C be a Grid itself. Inside it, I'd have columns 0.5fr, 1fr, 1fr, 0.5fr. But this is lot of repeated code, and is lot of work for a simple thing.
What is the most CSS Grid way of approaching this? All the tutorials I've seen, doesn't seem to cover this special case.

Answer 1

One option is to make C span the two columns in the center which seems in line with your layout and use a pseudo element that takes care of the background
add grid-row: 3 and grid-column: 1 / -1 to the pseudo element to place it in the same position as C but spanning the whole width
push it to the back using z-index: -1 and position: relative
See demo below:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper{
display: grid;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-template-areas:
"A A A A"
". B B ."
". C C ."
". D D .";
height: 100vh;
}
.wrapper:after {
content: '';
display: block;
grid-column: 1 / -1;
grid-row: 3;
background: cadetblue;
position: relative;
z-index: -1;
}
.A {
grid-area: A;
background: pink;
}
.B {
grid-area: B;
background: orange;
}
.C {
grid-area: C;
background: lightgreen;
}
.D {
grid-area: D;
background: orange;
}
<div class="wrapper">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
</div>