0

I am arranging div in a 3 column grid using flex. When the number of div is a multiple of 3, everything works perfectly (Case 1 in example). But if the number of div is something like 5, there is a large gap between the columns (Case 2). If I switch to justify-content-start (or justify-content: flex-start;), it will come close to what I want but there will be small gap at the right edge (things won't stretch from one end to another end of the grey box). Is there a way to make this work with dynamic number of div?

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
   

<style>
  .box {
    width: calc(33vw - 25px);
    height: 15px;
    margin-bottom: 25px;
  }
</style>

<div class="border border-secondary w-90 m-auto">
<div class="bg-primary m-auto w-100" style="height: 10px;"></div>

<h1>Case 1</h1>
<div class="d-flex flex-row flex-wrap justify-content-between">
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
</div>
<h1>Case 2</h1>
<div class="d-flex flex-row flex-wrap justify-content-between">
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
</div>
</div>
d.b
  • 32,245
  • 6
  • 36
  • 77
  • I've added a few dupe links...the first 2 has answers of mine, one with _ghost_ elements, one with _margin_. – Asons Jun 27 '19 at 21:52
  • Yes, as neither of those answers are limited to the amount of elements, they just deal with it in 2 different ways. – Asons Jun 27 '19 at 22:44

0 Answers0