Flexbox: 4 items per row

Flexbox: 4 items per row wrapping to the next row

by Dave Williams

HTML

<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
  </div>
</body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.child {
  border: 2px dashed rgba(0, 0, 0, 0.075);
  border-radius: 4px;
  color: #bbb;
  cursor: pointer;
  margin: 16px;
  min-width: calc((100% / 4) - 32px);
  max-width: calc((100% / 4) - 32px);
  padding: 32px;
}

.child:hover {
  border: 2px solid #409eff;
  color: #409eff;
}