O'Reilly logo
live online training icon Live Online training

CSS Layout Fundamentals: From floats to flexbox and CSS grid

Rachel Andrew

Until very recently, CSS layout was a series of hacks, which made using it difficult and led to fragile products. However, many current browsers support layout methods that were designed for the type of sites and applications we build on the web today. CSS layouts like flexbox and grid are revolutionizing frontend development, but to use them to their full potential, you need a clear understanding of how layout works.

Join expert Rachel Andrew for an exploration of modern CSS layout methods. In this 90 minute course, Rachel explores the various specifications for layout. You’ll get your hands dirty working with the most current layout approaches, from floats to flexbox to grid, as you learn not just how to use them but also which tool you should use for which task.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • How various CSS layout methods work
  • Which layout method you should choose and when
  • How to provide good experiences for older browsers when using new layout methods

And you’ll be able to:

  • Write robust CSS for layout using a variety of methods
  • Understand the CSS that is used in the frameworks or existing code you work with
  • Make the right choice in terms of layout methods, based on project requirements and browser support

This training course is for you because...

  • You’re a web designer or developer who has heard about new layout methods like grid and flexbox but don’t know where to get started.
  • You’re a web designer or developer with some CSS experience or have been using CSS frameworks for frontend development and want to better understand how layout works.

Prerequisites

  • A general understanding of HTML and CSS (Be sure you know how to add CSS to a page and apply it to elements.)

Recommended preparation:

Modern Web Development with HTML5 and CSS (video)

CSS Secrets (book)

CSS: The Definitive Guide, 4th Edition (book)

MATERIALS AND DOWNLOADS NEEDED:

  • A laptop or other connected device with an up-to-date copy of Firefox or Chrome installed
  • A free CodePen account (useful but not required)

About your instructor

  • Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the recent Get Ready for CSS Grid Layout and she is a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

UNDERSTANDING EXISTING LAYOUT (45 MINUTES)

  • Floating
  • Positioning
  • Inline-block
  • Display: Table
  • Why and when do we still use these things?

(break)

NEW LAYOUT (45 MINUTES)

  • Flexbox Basics
  • Grid Basics
  • Browser Support Approaches
  • Recommendations for Further Exploration