Grid-like gap in a flexbox

Grid-like gap in a flexbox

by Csaba Hellinger

HTML

<p>
  Grid-like gap in a flexbox.
  Switcing between 3 and 4 columns at 600px.
</p>
<div class="container">
  <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 class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.container {
  background: skyblue;
  display: flex;
  flex-wrap: wrap;
  --columns: 4;
  --gutter: 10px;
}

.item {
  background: gray;  
  flex-grow: 0;
  flex-shrink: 0;
  min-height: 40px;
  min-width: 40px;
  margin-right: var(--gutter);
  margin-top: var(--gutter);
}

@media only screen and (min-width: 601px) {
  .item {
    flex-basis: calc((100% - (3 * var(--gutter))) / 4);
  }
  .item:nth-child(4n) {
    background: aqua;
    margin-right: 0;
  }
  .item:nth-child(-1n+4) {
    background: blue;
    margin-top: 0;
  }
}

@media only screen and (max-width: 600px) {
  .item {
    flex-basis: calc((100% - (2 * var(--gutter))) / 3);
  }
  .item:nth-child(3n) {
    background: lime;
    margin-right: 0;
  }
  .item:nth-child(-1n+3) {
    background: green;
    margin-top: 0;
  }
}