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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…