Using Flexbox "justify-content: space-between" when number of row items varies-CodePudding

Currently, I'm using Flexbox justify-content: space-between to align items horizontally on collections pages.

However, not all collections have enough items to fill a row. In such a situation, I'd like the first two items to be in the same horizontal position as the first two items on a collections page with enough items to fill a row.

I could use margins on each item instead of using justify-content: space-between, but I'm hoping there is a way solve this with Flexbox.

.flex-container {
 display: flex;
 justify-content: space-between;
 margin-bottom:10px;
}

.item {
  height:20px;
  width:20px;
  background:red;
}

// some collections pages have enough items to fill a row like this
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

// other collections pages don't have enough items to fill a row and have this situation
<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Not possible with flexbox without using some huge work around. Instead use display grid.

.flex-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr)
}

.item {
  height:20px;
  width:20px;
  background:red;
}

// some collections pages have enough items to fill a row like this
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

// other collections pages don't have enough items to fill a row and have this situation
<div >
  <div ></div>
  <div ></div>
</div>