html - How do I list 3 Div elements next to each other horizontally?

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65949052/how-do-i-list-3-div-elements-next-to-each-other-horizontally

Answer 1

you should wrap you "columns" into a div. In that case they will be called grid-card. Apply a grid system by using grid-template-columns: repeat(3, 1fr); on your container #portaitGrid. `repeat(3, 1fr) will devide the space into 3 columns with the exact same width.

To add a gap between the cards, you can use grid-gap.

In your picture, the title and the image are smaller then the text block. As such I gave them only a width of 80% (80% of the card width) and centered them.

As I already said in the comments, 2x
is a bad use. As such I removed the linebreaks and added a margin-bottom to the image instead.

body {
  margin: 0;
}

#portraitGrid {
  display : grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  background-color: #ff99cc;
  padding: 15px;
}

#portraitGrid div img {
  width: 80%;
  margin: 0 10% 1em 10%;
}

#portraitGrid div h3 {
  width: 80%;
  text-align: center;
  background-color: black;
  color: white;
  margin: 0 auto;

<section id="portraitGrid">
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
    <h3>Hamster</h3>
    <p>My name is Yoshi. I'm a syrian hamster. My picture is often used for demonstration purpose at Stackoverflow by my owner.
    </p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
    <h3>Food</h3>
    <p>I enjoy eating water-melons.</p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Areno/IMAG0845.jpg">
    <h3>Hobbies</h3>
    <p>My favorite hobby is sleeping during daytime
    </p>
  </div>
</section>