Flexbox block-grid example
Thomas Mak wrote at 2017-05-10.
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.
Comments
no comments yet.