* { box-sizing: border-box; } /* ---- grid ---- */ .grid { /*background: #EEE;*/ max-width: 100%; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer, .grid-item { width: 20%; } .grid-item { height: 400px; float: left; /*background: #EEE;*/ border: 2px solid #ffffff; /*border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px;*/ } .grid-item--width2 { width: 40%; } .grid-item--width3 { width: 60%; } .grid-item--height2 { height: 200px; }