Container with grid layout and grid area - css

Question

Hello I'm trying to make a container grid with grid areas to achieve this goal:
But I am having difficulties in defining the areas of the father and the children.
.grid_layout {
display: grid;
grid-template-areas:
"a b c"
"a d e";
grid-gap: 6px;
grid-template-columns: 1fr fr 1fr;
height: 100%;
}
<div className="grid_layout">
<div className="a" />
<div className="b" />
<div className="c" />
</div>

Answer 1

You don't need template areas to accomplish this...but you do need six columns.
.grid_layout {
display: grid;
grid-gap: 6px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
width: 80%;
margin: 1em auto;
}
.item {
display: flex;
justify-content: center;
align-items: center;
background: lightgreen;
border: 1px solid green;
padding: 1em;
}
.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
grid-column: span 2;
}
<div class="grid_layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>

Answer 2

if you want to use areas , you still need to relay on 6 columns as stated in the comments.
.grid_layout {
display: grid;
grid-template-areas:
"a a b b c c "
"d e f g h i";
/*grid-template-columns:repeat(6,1fr); if you need this */
grid-gap: 6px;
height: 100%;/* 100% of what here ? parent has no height set*/
grid-auto-flow:row dense
}
img {width:100%;/* of the grid cell defined */}
img:nth-child(1) {
grid-area:a ;
}
img:nth-child(2) {
grid-area:b;
}
img:nth-child(3) {
grid-area:c;
}
img:nth-child(4) {
grid-area:d;
}
img:nth-child(5) {
grid-area:e;
}
img:nth-child(6) {
grid-area:f;
}
img:nth-child(7) {
grid-area:g;
}
img:nth-child(8) {
grid-area:h;
}
img:nth-child(9) {
grid-area:i;
}
<div class="grid_layout">
<img src="http://dummyimage.com/300x150/456">
<img src="http://dummyimage.com/300x150/789">
<img src="http://dummyimage.com/300x150/029">
<img src="http://dummyimage.com/300x150/fa0">
<img src="http://dummyimage.com/300x150/bad">
<img src="http://dummyimage.com/300x150/g0d">
<img src="http://dummyimage.com/300x150/f00">
<img src="http://dummyimage.com/300x150/555">
<img src="http://dummyimage.com/300x150/0af">
</div>
For a repeating pattern, grid-template-areas is not at best, but grid-template-columns would be better helped with grid-auto-flow:row dense; while telling text to span 2columns.
possible example :
.grid_layout {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 6px;
height: 100%;
/* 100% of what here ? parent has no height set*/
grid-auto-flow: row dense;
}
p {
border: solid;
margin: 0;
}
img {
width: 100%;
}
.a {
grid-column: 1 / span 2;
text-align: center;
}
.b {
grid-column: 3 / span 2;
text-align: center;
}
.c {
grid-column: 5 / span 2;
text-align: center;
}
div {
counter-reset: ps
}
p:before {
counter-increment: ps;
content: 'N°'counter(ps)' - ';
}
<div class="grid_layout">
<img class="a" src="http://dummyimage.com/300x150/456">
<p class="a">some text</p>
<img class="b" src="http://dummyimage.com/300x150/789">
<p class="b">some text</p>
<img class="c" src="http://dummyimage.com/300x150/029">
<p class="c">some text</p>
<img src="http://dummyimage.com/300x150/fa0">
<img src="http://dummyimage.com/300x150/bad">
<p class="a">some text</p>
<img src="http://dummyimage.com/300x150/g0d">
<img src="http://dummyimage.com/300x150/f00">
<p class="b">some text</p>
<img src="http://dummyimage.com/300x150/555">
<img src="http://dummyimage.com/300x150/0af">
<p class="c">some text</p>
</div>