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

Question

I have 3 divs that contain essentially the same info. Each div is made up of an image/header/paragraph. Each tag (IMG/Header/Paragraph) in the div should be listed underneath of each other so that we see the image, title of the picture beneath the image, and some text about the image beneath the title. Each div just has a different class name, column1/column2/column3

Each div should be listed next to each other in a line going from left to right, but I can't seem to get this right. Can someone help?

#portraitGrid {
  max-width: 30%;
  display: inline-block;
  background-color: #ff99cc;
}

.column1 {
  float: left;
  background-color: #ff99cc;
}

<div id="portraitGrid" class="column1">
    <img id="portfolioPortrait" class="portraitImage" src="Images/Humming 2.jpeg" />
    <br />
    <br />
    <h3 id="portfolioPortrait" class="title">Humming Bird</h3>
    <p>
        The Humming Bird portrait was inspired by a card made for my boyfriend. The theme of this was to have make something romantic in a cute, simple, yet bold. Framed in a black shadow box, the color and designs stand out even stronger.
    </p>
</div>

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>