Flexbox block-grid example

https://codepen.io/makzan/pen/VbQdWJ/

See the Pen Flex block-grid demo by Thomas Seng Hin Mak (@makzan) on CodePen.

*{box-sizing: border-box;}
ul {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
  flex: 0 1 33.33333%;   //(1)
  padding: .5em;
}

(1) Change the 33.3333% to different ratio to create 2-up, 3-up, 4-up, 5-up grid.