FlexBox based HTML grid.

by jshacker

HTML

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

CSS

.grid {
  display: flex; /* establish flex container */
  flex-wrap: wrap; /* enable flex items to wrap */
}
.cell {
  margin: 5px;
  flex: 0 0 calc(33.33% - 10px); /* don't grow, don't shrink, width less margin */
  height: 50px;
  max-width: 50px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #f00;
}