CSS Image grid spacing issue-CodePudding

Im trying to add a image grid to a section in my page. I've used this code:

<div >
<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.

CodePudding user response：

#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>

CodePudding user response：

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%; 
}