CODEWITHSUNDEEP
jquerybootstrap-4masonry
executable
executable

Reputation: 3600

Masonry has a lot of white space

I'm trying to configure masonry layout for my card.

$('.grid').masonry({
    fitWidth: true,
    horizontalOrder: true,
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 10
})
.grid {
  margin: 0 auto;
}
.grid-item {
  float: left;
}

.grid-sizer,
.grid-item { width: 25%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
   <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://lacerisesurlemaillot.fr/wp-content/uploads/2018/11/buddha-bowl-hiver-2.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://i.pinimg.com/originals/15/22/82/1522820f82f30e90769cca5ceb9f2bb3.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.fraichementpresse.ca/image/policy:1.1599393:1448625812/Muffins-a-la-citrouille.jpg?w=2000&amp;$p$w=5ac41a5" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img.cuisineaz.com/660x660/2018-03-19/i137795-delice-de-fruits-rouges-au-fromage-blanc.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://static.750g.com/images/640-420/b671ed36d875a4a410bf52469a739b6d/creme-au-chocolat-patate-douce.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img-3.journaldesfemmes.fr/AGdoN3wTJssPR2hd7Z_ZCGFoRk4=/748x499/smart/fa3db63ee3f2432f8b60ed0db9d74eed/recipe-jdf/10041860.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img-4.linternaute.com/JLeoNfFH6Y457_JEGOPp59Mv0T4=/1240x/smart/1e662d67364c47cd817f649a353483a3/ccmcms-linternaute/10844429.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.cookomix.com/wp-content/uploads/2016/07/flans-de-legumes-thermomix-800x600.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">test</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://acadienouvelle-6143.kxcdn.com/wp-content/uploads/2016/06/carrotmuffins-1.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="http://4.bp.blogspot.com/-kKerdlKUEEo/UoZHpWXxNLI/AAAAAAAABek/kJ7ddhsnb9A/s1600/P%C3%A2te+au+tofu,+poireau+et+olives-Les+gourmandises+de+Lydie.jpg" alt="TEST">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card card_recipes">
               <img class="img-fluid" src="https://p1.pxfuel.com/preview/903/434/406/quinoa-quinoa-salad-salad-spoon-royalty-free-thumbnail.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCgy_QBBU2Ck7fJRxbfbjI5ZYEaTpz_4RGYg&amp;usqp=CAU" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://i.pinimg.com/736x/aa/45/98/aa45985cb46755e8d2e51ba7a43d4eac.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TESTt</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.papillesetpupilles.fr/wp-content/uploads/2012/10/Du-pain-et-du-beurre-%C2%A9-zi3000-shutterstock.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="/img/recipe_notfound.svg" alt="test">
               <div class="card-body">
                  <h5 class="card-title">test</h5>
               </div>
            </div>
         </a>
      </div>
   </div>
</div>

In the fiddle, the card are having some colision, the text is not readable. And how can I have 4 columns ? I have set

.grid-sizer,
.grid-item { width: 25%; }

and it looks like it doesn't work

Upvotes: 1

Views: 598

Answers (1)

HoldOffHunger
HoldOffHunger

Reputation: 20901

It seems like there's already some padding around the elements, so width of 25% will cause the last item to wrap around to the next line. Try something just slightly lower to accommodate the padding, like 23%, and then you will have four columns...

$('.grid').masonry({
    fitWidth: true,
    horizontalOrder: true,
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 10
})
.grid {
  margin: 0 auto;
}
.grid-item {
  float: left;
}

.grid-sizer,
.grid-item { width: 23%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
   <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://lacerisesurlemaillot.fr/wp-content/uploads/2018/11/buddha-bowl-hiver-2.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://i.pinimg.com/originals/15/22/82/1522820f82f30e90769cca5ceb9f2bb3.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.fraichementpresse.ca/image/policy:1.1599393:1448625812/Muffins-a-la-citrouille.jpg?w=2000&amp;$p$w=5ac41a5" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img.cuisineaz.com/660x660/2018-03-19/i137795-delice-de-fruits-rouges-au-fromage-blanc.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://static.750g.com/images/640-420/b671ed36d875a4a410bf52469a739b6d/creme-au-chocolat-patate-douce.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img-3.journaldesfemmes.fr/AGdoN3wTJssPR2hd7Z_ZCGFoRk4=/748x499/smart/fa3db63ee3f2432f8b60ed0db9d74eed/recipe-jdf/10041860.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img-4.linternaute.com/JLeoNfFH6Y457_JEGOPp59Mv0T4=/1240x/smart/1e662d67364c47cd817f649a353483a3/ccmcms-linternaute/10844429.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.cookomix.com/wp-content/uploads/2016/07/flans-de-legumes-thermomix-800x600.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">test</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://acadienouvelle-6143.kxcdn.com/wp-content/uploads/2016/06/carrotmuffins-1.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="http://4.bp.blogspot.com/-kKerdlKUEEo/UoZHpWXxNLI/AAAAAAAABek/kJ7ddhsnb9A/s1600/P%C3%A2te+au+tofu,+poireau+et+olives-Les+gourmandises+de+Lydie.jpg" alt="TEST">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card card_recipes">
               <img class="img-fluid" src="https://p1.pxfuel.com/preview/903/434/406/quinoa-quinoa-salad-salad-spoon-royalty-free-thumbnail.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCgy_QBBU2Ck7fJRxbfbjI5ZYEaTpz_4RGYg&amp;usqp=CAU" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://i.pinimg.com/736x/aa/45/98/aa45985cb46755e8d2e51ba7a43d4eac.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TESTt</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="https://www.papillesetpupilles.fr/wp-content/uploads/2012/10/Du-pain-et-du-beurre-%C2%A9-zi3000-shutterstock.jpg" alt="img">
               <div class="card-body">
                  <h5 class="card-title">TEST</h5>
               </div>
            </div>
         </a>
      </div>
      <div class="grid-item">
         <a href="#">
            <div class="card">
               <img class="img-fluid" src="/img/recipe_notfound.svg" alt="test">
               <div class="card-body">
                  <h5 class="card-title">test</h5>
               </div>
            </div>
         </a>
      </div>
   </div>
</div>

Upvotes: 1

Related Questions