HTML Image Gallery Float Left Underneath - html

Question

I am trying to create an image gallery, and I have the following styling:
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
I have the following HTML:
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
The output looks like this:
How do I make the fourth image go underneath the first image? Note that I theoretically don't know how long the description (text) will be, so I do not want to hard code a height for the image or div.

Answer 1

.row{
display:flex;
flex-wrap:wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
flex-basis: calc(33.333333% - 15px);
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="row">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here aaaa aaaa aaaa aaaa aa</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>