| Update: done. https://codepen.io/mikemaccana/pen/WNgWmdY Please note I didn't bother extracting the icons out the design (it's 11PM and I should be in bed) so just used emojis. Choices: - Box model border-box (padding inside box, most CSS resets do this for you now) - Grid by default because we don't need flexing. - No margins, at all. Space between items and their parents are determined by padding, space between items and their siblings are determined by 'gap'. - No issues with vertical centering because items are aligned for the middle. - CSS borders on the right of each grid each cell for the lines. We'd need a lot less HTML/CSS if the lines were removed BTW since many of items inside the cell have their own borders, part of good design is knowing the costs of your designs. - Took 36 mins. Original: F*k it. Live coding. Come watch: https://codepen.io/mikemaccana/pen/WNgWmdY |