Adding Text beneath each column 4X4 using CSS GRID - css

Question

I am very new to CSS Grid and am trying to create a 2 X 2 grid. I am able to create the four image divs ( 2 on each row and 2 on each column) but I want the text to appear underneath each one. I have tried to use the grid-template-areas property but all the text just appears under one div all overlapped.
Any help would be appreciated, please.
.image {
width: 526px;
height: 360px;
border: 1px solid #000;
border-radius: 10px;
margin-top: 35px;
margin-bottom: 35px;
}
.grid-container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 1em;
grid-template-areas: "image image " "text text";
}
.text {
grid-area: text;
}
<div class="banner">
<div class="wrapper">
<div class="grid-container">
<div class="image"></div>
<p class="text">TEXT 1</p>
<div class="image"></div>
<p class="text">
TEXT 2
</p>
<div class="image"></div>
<p class="text">TEXT 3</p>
<div class="image"></div>
<p class="text">TEXT 4</p>
</div>
</div>
<!-- wrapper -->
</div>
<!-- banner -->

Answer 1

You can use nth-child() to correctly place your elements instead of grid-area:
.image {
width: 200px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
margin-top: 35px;
margin-bottom: 35px;
}
.grid-container {
display: grid;
grid-auto-flow: dense; /* this one is important to fill all the cells */
grid-auto-columns: 1fr;
column-gap: 10px;
}
.image:nth-child(4n + 3) {
grid-column: 2;
}
.text:nth-child(4n + 2) {
grid-column: 1;
}
<div class="banner">
<div class="wrapper">
<div class="grid-container">
<div class="image"></div>
<p class="text">TEXT 1</p>
<div class="image"></div>
<p class="text">TEXT 2</p>
<div class="image"></div>
<p class="text">TEXT 3</p>
<div class="image"></div>
<p class="text">TEXT 4</p>
</div>
</div>
</div>
This will work even if you add more image/text:
.image {
width: 200px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
margin-top: 35px;
margin-bottom: 35px;
}
.grid-container {
display: grid;
grid-auto-flow: dense; /* this one is important to fill all the cells */
grid-auto-columns: 1fr;
column-gap: 10px;
}
.image:nth-child(4n + 3) {
grid-column: 2;
}
.text:nth-child(4n + 2) {
grid-column: 1;
}
<div class="banner">
<div class="wrapper">
<div class="grid-container">
<div class="image"></div>
<p class="text">TEXT 1</p>
<div class="image"></div>
<p class="text">TEXT 2</p>
<div class="image"></div>
<p class="text">TEXT 3</p>
<div class="image"></div>
<p class="text">TEXT 4</p>
<div class="image"></div>
<p class="text">TEXT 5</p>
<div class="image"></div>
<p class="text">TEXT 6</p>
<div class="image"></div>
<p class="text">TEXT 7</p>
<div class="image"></div>
<p class="text">TEXT 8</p>
</div>
</div>
</div>

Answer 2

Manage placement without template areas using nth-of-type and flow via columns.
.image {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 10px;
margin-top: 35px;
margin-bottom: 35px;
}
.grid-container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 1em;
grid-auto-flow: column;
}
p:nth-of-type(odd),
.image:nth-of-type(odd) {
grid-column: 1;
}
p:nth-of-type(even),
.image:nth-of-type(even) {
grid-column: 2;
}
<div class="banner">
<div class="wrapper">
<div class="grid-container">
<div class="image"></div>
<p class="text">TEXT 1</p>
<div class="image"></div>
<p class="text">
TEXT 2
</p>
<div class="image"></div>
<p class="text">TEXT 3</p>
<div class="image"></div>
<p class="text">TEXT 4</p>
</div>
</div>
<!-- wrapper -->
</div>
<!-- banner -->

Answer 3

I removed the grid-area configuration from CSS code. Also, I have rearranged the sequence of your image and text HTML code. I hope this is what you expected.
.image {
width: 526px;
height: 360px;
border: 1px solid #000;
border-radius: 10px;
margin-top: 35px;
margin-bottom: 35px;
/*grid-area: image;*/
}
.grid-container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 1em;
/* grid-template-areas: "image image" "text text"; */
}
.text {
text-align: center; /* Aligning the text to center */
/* grid-area: text;*/
}
<div class="banner">
<div class="wrapper">
<div class="grid-container">
<div class="image"></div>
<div class="image"></div>
<p class="text">TEXT 1</p>
<p class="text">TEXT 2</p>
<div class="image"></div>
<div class="image"></div>
<p class="text">TEXT 3</p>
<p class="text">TEXT 4</p>
</div>
</div>
<!-- wrapper -->
</div>
<!-- banner -->