Cacher is the code snippet organizer for pro developers

Flexbox layout recept

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

.grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    width: calc(100% + 20px);
}

@supports (display: grid) {
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 20px;
    }
}

.item {
    width: calc((100% / 3) - 20px);
    flex: 0 0 auto;
    margin: 0 10px 20px 10px;
}

OR:

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="break"></div> <!--break element-->
</div>

.grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.break {
  width: calc(100% / 3 - 10px);
  height: 0;
}

.item {
  width: calc(100% / 3 - 10px);
  margin-bottom: 20px;
  height: 100px; 
}

Полезный Pen:

1. Grid auto-fit example
2. Flexbox layout