CSS Layout

Back to menu

inline-block

Take a look at how little CSS is required for a grid system using inline-block! (look in the module.css file). Combine that small amount of css with the width utility classes and we have a responsive grid.

Yes there are some issues with unequal heights but these can be overcome by introducing a little flexbox which we will cover later.

Holy grail layout - Heights unequal

header

CSS Layout

The history of CSS Layout on the web is largely web developers using tools for layout which were not intended for layout.

Product grid - Heights unequal

CSS Pocket Reference

Know your margins from your paddings.

Unequal heights :(