Gallery based on grid - overflow of content and images ratio issue - html

Question

I am exercising my web development skills by building a simple gallery app. Unfortunately CSS turned out to be biggest problem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.main-container {
height: 100%;
width: 100%;
margin: 0 10%;
display: flex;
flex-direction: column;
}
.searchbox {
margin-bottom: 20px;
}
.gallery {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 20%);
gap: 20px;
justify-items: center;
}
.image-container {
display: flex;
flex-direction: column;
height: 100%;
}
img {
display: block;
flex: 9;
min-height: 0;
}
.title {
flex: 1;
}
.pagination {
margin-top: 20px;
}
<div class="main-container">
<div class="searchbox">SEARCHBOX</div>
<div class="gallery">
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/300/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/400/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/100/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/100/100"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/300/100"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
</div>
<div class="pagination">PAGINATION</div>
</div>
My gallery will have 20 images per page (4x5). The images might be of different sizes - some might be horizontal, some vertical, some square.
The problems that I have:
The images are scaled in a way that does not keep their original ratio
The "app" does not take only 100% of the height - it takes more, and I need to scroll. Ideally, 100% should be taken always
The "pagination" DIV landed somewhere inside of the grid. It should be placed below the grid.
I have to admit that I tried many different ways to fix it, however I was either getting into even weirder results, or not fixing the problem at all.
What is wrong with my CSS?

Answer 1

First take the height and width out of your html, body - it's directly affecting your image sizes
html, body {margin:0; padding:0;}
Then drop the margin from your main container, it's causing an overflow. Maybe you meant to use padding?
.main-container {
height: 100%;
width: 100%;
/*margin: 0 10%;*/ <--- Remove
display: flex;
flex-direction: column;
}
After that you can use the object-fit property to align your image positions :) It's important that your height and width are set though!
img {
display: block;
flex: 9;
min-height: 0;
width:300px;
max-height:300px;
object-fit:cover;
}
I hope this helps! https://jsfiddle.net/1txLvoh6/

Answer 2

I'd prefer this variant:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.main-container {
width: 80%;
margin: 0 10%;
display: grid;
grid-gap: 20px;
grid-template-rows: 1em max-content 1em;
grid-template-columns: 1fr;
}
.searchbox {
/* your styles for searchbox */
}
.gallery {
display: grid;
/* columns can be equal too, using calc and without justification on center */
grid-template-columns: repeat(4, 1fr);
/* 4 gaps between rows + 2 gaps above and below of gallery + search and pager heights */
grid-template-rows: repeat(5, calc(20vh - 2em));
grid-gap: 20px;
justify-items: center;
}
.image-container {
display: flex;
flex-direction: column;
height: 100%;
}
img {
display: block;
flex: 9;
min-height: 0;
object-fit: cover;
}
.title {
flex: 1;
}
.pagination {
/* your styles for pagination */
}