Make grid elements take the whole grid

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





  
  
  
  
  

  
  
  
  
  
  



  
    
      
        
        title
      

      Done: 7

      

      

    
    




    
      
        
          
          
        
        
          
               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.
                
        
      
    
    
      
        
          
          
            Aleksandra, 22
            slepetes
          
        
      
      
        
          
          
            Vlad, 45
            slepetes
          
        
      
      
        
          
          
            Alex, 77
            slepetes
          
        
      
      
        
          
          
            Aleksandra, 22
            slepetes
          
        
      
      
        
          
          
            Vlad, 45
            slepetes
          
        
      
      
        
          
          
            Alex, 77
            slepetes
          
        
      
      
        
          
          
            Aleksandra, 22
            slepetes
          
        
      
      
        
          
          
            Tomas, 109
            slepetes
          
        
      
      
        
          
          
            Vlad, 45
            slepetes
          
        
      
      
        
          
          
            Alex, 77
            slepetes
          
        
      
      
        
          
          
            Aleksandra, 22
            slepetes
          
        
      
      
        
          
          
            Tomas, 109
            slepetes
          
        
      
      
        
          1
          2
          3

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?

Dan Knights · Accepted Answer

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




  
    
      
      
        Aleksandra, 22
        slepetes
      
    
  
  
    
      
      
        Vlad, 45
        slepetes
      
    
  
  
    
      
      
        Alex, 77
        slepetes
      
    
  
  
    
      
      
        Aleksandra, 22
        slepetes
      
    
  
  
    
      
      
        Vlad, 45
        slepetes
      
    
  
  
    
      
      
        Alex, 77
        slepetes
      
    
  
  
    
      
      
        Aleksandra, 22
        slepetes
      
    
  
  
    
      
      
        Tomas, 109
        slepetes
      
    
  
  
    
      
      
        Vlad, 45
        slepetes
      
    
  
  
    
      
      
        Alex, 77
        slepetes
      
    
  
  
    
      
      
        Aleksandra, 22
        slepetes
      
    
  
  
    
      
      
        Tomas, 109
        slepetes
      
    
  
  
    
      1
      2
      3

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 
}

Make grid elements take the whole grid

Answers (1)

Related Questions