Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS Layouts: From Float to Flexbox and Grid

via LinkedIn Learning

Overview

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.

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.

Syllabus

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

Taught by

Christina Truong

Related Courses

Reviews

Start your review of CSS Layouts: From Float to Flexbox and Grid

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free