grid-template-columns CSS displaying vertically and not horizontally - html

Question

I am a student working on a website. I have the below CSS/HTML script that should be displaying cards in order horizontally, however when I view it on a website its showing up vertically instead.
Goal:
[pic1] [pic2] [pic3]
[pic4] [pic5] [pic6]
Current Output:
[pic1]
[pic2]
[pic3]
[...]
[pic6]
Current Code:
I have only included code that should be relevant to my question, please let me know if I should include additional code for guidance.
.cards {
margin: 0 auto;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: 20px;
font-family: Arial;
padding-top: 30px;
}
<div class="cards">
<div class="card">
<img src="image.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>
<div class="cards">
<div class="card">
<img src="image2.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image2</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>

Answer 1

I would really do that with display: flex ... why? because it is easier and not that complex to work with grid and give your flex-children a flex-basis of 30% to have three children in one row.
Nevertheless, you have div class="cards" openend twice. you will probably have this div only once and div class="card__*" several times.
grid is more compatible with older versions of browsers, like IE11, but also only with the prefix, but that's just my personal thought.