Make grid elements take the whole grid - html

Question

I am making a grid with cards:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.navbar-brand,
.footer-text,
.page-link,
.form-input>label,
.checkbox {
color: #84a5a9 !important;
}
.wishes {
padding: 5px;
background: rgba(229, 229, 229, 0.4);
}
.wishes>span {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px !important;
/* identical to box height */
color: #84A5A9;
}
.container {
color: #84A5A9 !important;
}
.front-text {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: #84A5A9;
}
#media only screen and (max-width: 760px) {
.img {
height: 100px !important;
width: 100px !important;
}
.caption {
top: 30% !important;
}
.front-text {
font-size: 15px !important;
color: #84A5A9;
}
.bgimg-1 {
height: 700px !important;
}
.nav-title,
.wishes>span {
font-size: 14px !important;
}
.nav-logo {
height: 50px !important;
width: 50px !important;
}
.mobile {
padding: 0px 0px 0px 1px !important;
}
.form-input {
display: inline-grid !important;
}
.form-input>label,
input {
width: 100% !important;
}
.navbar-brand,
.footer-text {
font-size: 14px !important;
}
.footer-text {
width: 26% !important;
}
.footer-nav {
width: 40% !important;
}
}
.nav-logo {
height: 60px;
width: 60px;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
li:focus,
input:focus {
outline: none;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive {
max-height: 334px;
filter: grayscale(90%);
border: 1px solid #ccc;
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/*Naudojama submmito formos stulpeliams*/
label {
width: 150px;
padding-right: 20px;
display: inline-block;
}
.modal {
height: auto !important;
padding: 0 !important;
max-width: 800px!important;
max-height: 700px!important;
overflow-y: auto!important;
}
.container {
padding: 2px 16px;
}
.page-item.active .page-link {
z-index: 0 !important;
}
/* ----- NAVBAR ----- */
nav {
padding: 0px 5px 0px 20px !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1 !important;
}
nav .submit-button {
padding: 5px 10px;
margin: 5px;
}
/* ------- FOOTER ----- */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* -------- ICONS ------ */
.fa-instagram {
background: #125688;
color: white;
}
.fa {
padding: 10px;
font-size: 15px !important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 35px;
height: 35px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* PARALLAX */
.front-sd {
position: fixed;
left: 24.65%;
right: 50%;
top: 15.82%;
bottom: 43.75%;
}
.front-logo {
position: fixed;
left: 50%;
right: 19.1%;
top: 15.82%;
bottom: 43.75%;
background: url('../images/logo.png');
}
.bgimg-1 {
background: url('../images/clouds.png');
min-height: 100%;
height: 1024px;
}
.front-text {
font-size: 20px;
width: 50%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
/* opacity: 0.65; */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption {
position: absolute;
left: 0;
top: 18%;
width: 100%;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel=icon href=images/100sd.png type="image/png">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<nav class="mobile navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/100sd.png" class="nav-logo d-inline-block align-middle" alt="">
<span class="nav-title">title</span>
</a>
<div class="wishes"><span>Done: 7</span></div>
<ul class="menu">
</ul>
</nav>
<script>
</script>
<div class="bgimg-1">
<div class="caption">
<div>
<img src="images/100sd.png" class="img d-inline-block align-middle" alt="">
<img src="images/logo.png" class="img d-inline-block align-middle" alt="">
</div>
<div class="front-text">
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</span>
</div>
</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
since I have paging I want my elements take the whole grid so it wouldn't look like it's the end of data though there are next page. However on certain sizes it doesn't take the whole grid and looks like:
I tried using auto-fill and auto-fit but I am clearly doing something wrong here. Coul anyone help?

Answer 1

Set the min value of your minmax to 400px:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.container {
color: #84A5A9 !important;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
/*Naudojama submmito formos stulpeliams*/
.container {
padding: 2px 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
It still breaks at about 2200px but it depends on your use case as to whether that's an issue.
You can always set a max-width to prevent this:
.grid {
max-width: 1900px // Or whatever
}