Adding Text beneath each column 4X4 using CSS GRID

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>