CSS Layouts: From Float to Flexbox and Grid

1h 47mIntermediate2019-09-10

Authors

Christina Truong

Educator, Front-End Developer

Course details

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

Skills covered

Responsive Web DesignCSSWeb DesignAdvancedFront-End Web DevelopmentWeb DevelopmentOpen Source

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Using the exercise files

1. An Overview of Page Layouts

04 - Layouts with HTML
05 - Layouts with CSS
06 - Browser support and CSS standards

2. Float, Display, and Position

07 - Inline and block elements
08 - The box model properties
09 - The display property
10 - The box model and layouts
11 - The float property
12 - Clearing floats
13 - Setting up your project
14 - Exercise - Build a layout with float
15 - Position - Relative and absolute
16 - Position - Fixed, sticky, and static

3. Flexbox

17 - Getting started with Flexbox
18 - Orientation with flex-direction and flex-wrap
19 - Flexible sizing
20 - Sizing multiple flex items
21 - The order property
22 - Nesting flex containers
23 - Exercise - Build a layout with Flexbox
24 - Exercise - Build a layout with Flexbox

4. Grid

25 - Grid vs. Flexbox
26 - Grid, grid systems, and CSS Grid
27 - Create a basic Grid layout
28 - Columns, rows, and gutters with Grid
29 - Positioning with Grid
30 - Exercise - Build a layout with Grid
31 - Firefox Grid Inspector

Conclusion

32 - Next steps and resources