But What About Old Browsers?

I was very pleased to be asked to speak at Fronteers in Amsterdam earlier this year. The team put on a wonderful show and all of the videos are now online and worth watching.

In my talk I covered Flexbox, Grid and the Box Alignment Module. I was aiming to demonstrate these as part of a new way of doing layout for the web – rather than opposing layout systems.

Slides

My slides and some other resources are here.

Code Examples

I created some simple code examples to highlight some of the key ways Grid and Flexbox change the way we can approach layout. I’ve added these to CodePen.

Equal Height Columns

Remember the Faux Columns Technique? We don’t need hacks like that with Grid and Flexbox. This shows a key feature of our new layout methods. Items understand themselves as part of an overall layout.

• Flexbox
• Grid

Separation of Source and Display

We’ve tried to get this separation for years. It was the rallying cry of the anti-tables for layout movement. Finally we get there.

• Flexbox reversing order of items
• Flexbox order property
• Grid placement properties
• Grid auto-flow: dense

Control of Alignment

• Flexbox distributed alignment
• Flexbox align-items
• Grid Box Alignment align-items
• Grid Box Alignment justify-items
• Grid Box Alignment align-self
• Grid Box Alignment justify-self

Responsive by Default

• flex-grow example
• Grid fraction unit example
• Holy Grail with grid layout