Trying to add Text to Grid

Question

I'm sure something similar has been asked a few times, and I tried searching here and tried a few suggestions, but I'm not having any luck. Also, I'm a complete newbie.

In short, I'd like to add text below each image in a grid, and I have 3 images in each row (3 rows). The goal, is to have a name beneath the center of each image (chickens .... yes I know, this is all practice xD).

.image-container {
  width: 100%;
}

.row-one,
.row-two,
.row-three {
  width: 90%;
  margin: 10px auto;
  text-align: center;
}

.grid-item {
  width: 30%;
  height: 310px;
  display: inline-block;
  margin: 15px;
  background-size: cover;
  background-position: center;
}

#chicken-one {
  background-image: url(blah blah blah link);
}

<section class="ourchicken-section">
  <h3 class="section-title">Our Chickens</h3>
  <div class="image-container">
    <div class="row-one">
      <div class="grid-item" id="chicken-one"></div>
      <div class="grid-item" id="chicken-two"></div>
      <div class="grid-item" id="chicken-three"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-two">
      <div class="grid-item" id="chicken-four"></div>
      <div class="grid-item" id="chicken-five"></div>
      <div class="grid-item" id="chicken-six"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-three">
      <div class="grid-item" id="chicken-seven"></div>
      <div class="grid-item" id="chicken-eight"></div>
      <div class="grid-item" id="chicken-nine"></div>
    </div>
  </div>
</section>

and so on...

Should I be adding a second div in the HTML, then a <p> element below each chicken div and their name? I tried that, but it pushes the images out of alignment.

Maybe I'm just too new and need to learn more.

score 2 · Answer 1 · edited Aug 25 '20 at 03:42

2

Use ::after pseudo element and say white-space: nowrap; to align content beneath the grid.

This will work!

.grid-item::after {
    content: " hi there"; //your text here
    white-space: nowrap;
}

edited Aug 25 '20 at 03:42

TylerH

20,799
66
75
101

answered Aug 24 '20 at 18:59

Radical Edward

2,824
1
10
23

score 0 · Answer 2 · answered Aug 24 '20 at 18:49

You are looking for the content and :after functionalities of css.

content will add text or html code to your class or id.

:after will add it after the tag of the class or id. It's worth mentioning that there is also a :before option.

#chicken-one:after {
 content: "test";
}
#chicken-two:after {
 content: "test";
}
#chicken-three:after {
 content: "test";
}

or for all, you could do something like:

.grid-item:after {
 content: "test";
}

Trying to add Text to Grid

2 Answers2