How to change flexbox wrap?

by

If to use Flexbox, and without script, you could create ghost elements, so they fill out the space on the last line.

So for a possible column length of 4, you need 3 ghost element and so on.

It is also possible to use the pseudo elements, which will decrease the needed ghost‘s by 2.

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}
<div class="container">
  <div class="recipe-grid">
    
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
    

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    
  </div>
</div>

Updated

Since you use justify-content: space-around, you could also do like this, where you add an extra wrapper around the card, center it and then, with media queries, make the wrappers fill the line based on the amount of items per row.

Note, since one can’t use CSS calc in the media query, the values are based on 1rem equals 16px, so the first is calculated like this: 300px + (2rem * 2) = 728px and so on. So if your browsers’s default font size on the root element is anything but 16px, you either set it to that, or recalculate the query values

.card {
  text-align: center;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  max-width: 300px;
  margin: 2rem;
  padding-bottom: 1rem;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.recipe-grid .card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
@media (min-width:  728px) { .recipe-grid .card-wrapper { width: 50%;     } }
@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;     } }
@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;     } }
<div class="container">
  <div class="recipe-grid">
    
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
     
    <div class="card-wrapper">
      <div class="card">
        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
        <h3> Egg beef sandwich </h3>
        <p> 604 kcal - totally vegan </p>
      </div>
    </div>
    
  </div>
</div>

Finally, I also want to mention these posts, how-to-center-a-flex-container-but-left-align-flex-items and can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in (which might can be considered a duplicate to this), as it has a great explanation how Flexbox works when it comes to its ability to both wrap and center items, and some more solutions than the one’s I gave.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Bootstrap align navbar items to the right
  3. Aligning grid items across the entire row/column (like flex items can)
  4. What’s the difference between align-content and align-items?
  5. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  6. How can I make Flexbox children 100% height of their parent?
  7. Bootstrap 4 navbar with 2 rows
  8. What’s the difference between display:inline-flex and display:flex?
  9. Scrolling a flexbox with overflowing content
  10. A grid layout with responsive squares
  11. Bootstrap 4 masonry layout utilizing flexbox grid
  12. Create a Masonry grid with flexbox (or other CSS)
  13. css grid of squares with flexbox
  14. CSS flexbox not working in IE10
  15. Set flexbox children to have different heights to use up available space
  16. Height 100% on flexbox column child [duplicate]
  17. text-overflow ellipsis on flex child not working [duplicate]
  18. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  19. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  20. How can I change the order of Bootstrap columns?
  21. The difference between flex:1 and flex-grow:1
  22. How do I set distance between flexbox items?
  23. Difference between flex-end and end? [duplicate]
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. How to exclude the first item in a flexbox wrap?
  26. Row Wrap in flex-box not wrapping in Safari
  27. ml-auto is not pushing navbar links to the right
  28. Horizontal masonry layout with flexbox CSS only [duplicate]
  29. CSS Flexbox: difference between align-items and align-content [duplicate]
  30. First-child full-width in Flexbox

Leave a Comment