CSS Image grid spacing issue - css

Question

Im trying to add a image grid to a section in my page.
I've used this code:
<div class="champ-container">
<img src="image" />
<img src="image" />
<img src="image" />
<img src="image" />
<img src="image" />
</div>
CSS:
#champ-container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, max-content);
}
#champ-container img {
width: 100%;
}
here is what it currently doing:
There is a large space between each image, and I can't figure out why. I want maybe a 10px gap between the images. For this grid, I'm looking for three across and the rest wrapping to the next row. I dont understand how the third image ended up as its own row. all images are the same size: 288x164.

Answer 1

#champ-container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, max-content);
}
#champ-container img {
width: 100%;
}
<div id="champ-container">
<img src="image" />
<img src="image" />
<img src="image" />
<img src="image" />
<img src="image" />
</div>

Answer 2

You have used champ-container class in html but you have used it as an id. Change your css to this
Correct CSS:
.champ-container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, max-content);
}
.champ-container img {
width: 100%;
}