CSS Layouts: From Float to Flexbox and Grid

Floats are fading away fast. Learn how to make the jump from floats to Flexbox and Grid to more efficiently create page layouts with CSS.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. An Overview of Page Layouts

• Layouts with HTML
• Layouts with CSS
• Browser support and CSS standards

2. Float, Display, and Position

• Inline and block elements
• The box model properties
• The display property
• The box model and layouts
• The float property
• Clearing floats
• Setting up your project
• Exercise: Build a layout with float
• Position: Relative and absolute
• Position: Fixed, sticky, and static

3. Flexbox

• Getting started with Flexbox
• Orientation with flex-direction and flex-wrap
• Flexible sizing
• Sizing multiple flex items
• The order property
• Nesting flex containers
• Exercise: Build a layout with Flexbox
• Exercise: Build a layout with Flexbox

4. Grid

• Grid vs. Flexbox
• Grid, grid systems, and CSS Grid
• Create a basic Grid layout
• Columns, rows, and gutters with Grid
• Positioning with Grid
• Exercise: Build a layout with Grid
• Firefox Grid Inspector

Conclusion

• Next steps and resources