CSS Layouts From Float to Flexbox and Grid

CSS

Course details

  • 1h 46m
  • Intermediate
  • Released: 9/10/2019

For decades, CSS developers fiddled with floats to create flexible layouts that worked across browsers. But their brilliant hack had a lot of downsides. The latest generation of CSS specs offers a better and vastly more intuitive set of tools, but moving from floats to Grid, Flexbox, or both means adjusting how you think. In this course, Christina Truong guides you though this process, from initial concepts to complete conversion, highlighting the different ways to create page layouts with modern CSS. Explore how to work with the display and float properties; use relative, absolute, and fixed positioning for laying out components; create basic Grid and Flexbox layouts; and more.

Learning objectives

  • Layouts with HTML and CSS
  • Using the display and float properties
  • Using relative and absolute positioning
  • Building page layouts with Flexbox
  • How Grid differs from Flexbox
  • Creating a basic Grid layout
  • Positioning with Grid
Return to CSS Courses