How should i do this grid on flex?

Question

How should i do this grid on flex? If i give justify-content: space-between to the parent, the bottom line will have big space between(big space between mean, right and left and empty space at center, if i'll remove justify-content: space-between and do it with margin-right i will have margin-right at all right block, at all rows.

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 23%;
  height: 150px;
  margin-bottom: 10px;
  background: blue;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

score 0 · Answer 1 · edited Mar 11 '21 at 15:40

I have tried many flex box situations, and can't seem to get what you want. I have used a margin-right, but removed it from the last block like so:

.list {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}
.item {
  width: 23%;
  height: 150px;
  margin-bottom: 10px;
  background: blue;
  margin-right: 10px;
}
.item:last-child {
  margin-right: 0px;
}

But I have also tested the following:

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

Which gives you what you want...but when you reach a certain break point in your browser winbow...even the above gives you the big gap between the last two.

It seems anything lower than 1065px will give you your issue. Moving past 855px will align them properly again.

So I believe you had the correct CSS but you may have to deal with some break points using media queries?

Again I might be incorrect, but these are my findings.

score 0 · Answer 2 · answered Mar 11 '21 at 15:38

If you want to use flexbox, remove space-between. Then use nth-child to remove the margin right of every 4th div and the margin bottom of the last 4 divs.

.list {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 23.5%;
  height: 150px;
  margin: 0 2% 2% 0;
  background: blue;
}

.item:nth-child(4n + 4) {
  margin-right: 0;
}

.item:nth-last-child(-n + 4) {
  margin-bottom: 0;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How should i do this grid on flex?

2 Answers2