Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Get up to date with modern CSS layout

Rachel Andrew (
9:00am–12:30pm Tuesday, June 20, 2017
Modern Web Essentials
Location: 210 CG
Secondary topics:  CSS3, Responsive web design
Average rating: ****.
(4.33, 6 ratings)

Who is this presentation for?

  • Web designers and developers and anyone who has to touch CSS as part of their work

Prerequisite knowledge

  • Familiarity with HTML and CSS

Materials or downloads needed in advance

  • A laptop with up-to-date versions of Chrome and Firefox installed
  • A free CodePen account

What you'll learn

  • Understand how various CSS layout methods work and the core tasks they were designed for


In 2017, many browsers support layout methods that were designed for the type of sites and applications we build on the web today. Flexbox and Grid will revolutionize frontend development, but to fully understand them you need to understand how layout works.

Rachel Andrew offers an introduction to new CSS tools and specifications for layout with the aim of not just teaching you how to use them but giving you the knowledge to determine which tool you should choose for which task.

Rachel starts by taking a brief look at the existing tools for layout, explaining when you might still need to reach for these tools and what challenges these tools present before setting the scene for the newer methods that solve some of these problems when used for complex layout.

Rachel then explores newer tools like Flexbox and Grid layout, demonstrating how to use them to your best advantage while also supporting older browsers without Flexbox or Grid support.

Photo of Rachel Andrew

Rachel Andrew

Rachel Andrew is a front- and backend web developer, author, speaker, and cofounder of the CMS Perch. Rachel is a Google Developer Expert and an invited expert to the CSS Working Group. She is a regular contributor to a number of publications both on- and offline; her books include the recent Get Ready for CSS Grid Layout. She also writes about business and technology on her own site,

Comments on this page are now closed.


Picture of Rachel Andrew
Rachel Andrew | FOUNDER
06/19/2017 11:47pm PDT

Sorry about your flight :( I don’t have slides for this session, it’s all code examples, however I will have the finished set of examples which I will get O’Reilly to send a link to everyone registered.

06/19/2017 11:40pm PDT

Can or will some materials be provided on the session like PP slides and source code? My flight was cancelled yesterday and I won’t be able to attend this session and I was really looking forward to it. Thank you.