I've been attempting to create an image gallery for my portfolio, but I'm struggling to display the images without borders and arrange them both horizontally and vertically. So far, all of my efforts have been unsuccessful.
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
#thumbs {
width: 20%;
height: 50px;
color: #090;
float: left;
font-size: 0px;
}<div class="portfolio">
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
</div>is a website that demonstrates what I'm aiming for with my image gallery. However, in my case, all my images are the same size (though I would be open to exploring how to make them different sizes while still maintaining the desired layout).