1

I've got a grid of elements which I want equally divided in 3. So I want each row to contain 3 elements. Because I want them to have an equal gutter I used justify-content: space-between when using flexbox. This looked good until I noticed that when the last row contains 2 elements they just get split up.

.blue{
  width: 420px;
  height: 230px;
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.red{
  width: 32%;
  height: 100px;
  background: red;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
}

.green{
  width: 420px;
  height: 230px;
  background: green;
  display: flex;
  flex-wrap: wrap;
}

.orange{
  width: 32%;
  height: 100px;
  background: orange;
  display: block;
  border-sizing: border-box;
  border: 1px solid white;
  margin-right: 1.25%;
}

.orange:nth-child(3){
  margin-right: 0;
}
<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

<section class="green">
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
  <div class="orange"></div>
</section>

My second approach seems to fix most of it, but I want it to be responsive and be broken down in rows of 2 and on mobile in rows of 1, then that will also look off. Is there anything to fix this without javascript? I've been looking to add classes based on the length of the amount of elements, but that seems unprofessional... There might be something I don't know yet which could help me out in this case.

Kevin
  • 1,219
  • 1
  • 16
  • 34
  • 1
    Thanks for that link, pretty hard to name this problem and thus look for it. I went with a phantom element for now. – Kevin Mar 24 '17 at 10:23

1 Answers1

0

You can use flex:1; + min-width to create a breakpoint.

You can also use a pseudo element to fill part of the last row.

.blue{
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:1em;
}

.red, .blue:after{
  content:'';
  min-width:280px;
  flex:1;
  margin:0 1em;
}
.red {
  margin:1em;
  height: 100px;
  background: red;
  display: block;
  box-sizing: border-box;
  border: 1px solid white;
}
<section class="blue">
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
</section>

Usually, mediaqueries are used to set breakpoint in CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This nearly seems to be it, however, between 1608px and 984px the last div seems to take two sizes, how would you go and fix that? – Kevin Mar 24 '17 at 08:51
  • @Kevin to fix this i would use the mediaqueries to reset width of the pseudo element so it takes the right amount of space to reduce element on the last row to the width needed ;) do you have an example of your code showing this issue ? – G-Cyrillus Mar 24 '17 at 13:45