There are currently no items in your shopping cart.

User Panel

Forgot your password?.

CSS Layouts: From Float to Flexbox and Grid

Video Introducing this tutorial

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

Next steps and resources