CSS Layout

Back to menu

floats

Not that much CSS is needed for a grid system using float (look in the module.css file). Combined with the width utility classes we have a responsive grid. Unfortunately we do have to manage clearing the floats when making responsive layouts.

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 :(