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

CSS Layouts: From Float to Flexbox and Grid

via LinkedIn Learning

Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Effort

1 hour 46 minutes
Sessions

Self-Paced
Level

Intermediate

Found in

Part of

Learn CSS

CodeSignal

2,000+ Free Courses with Certificates: Coding, AI, SQL, and More

University of the People

Earn Your CS Degree, Tuition-Free, 100% Online!

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off

One annual plan covers every course and certificate on Coursera. 40% off for a limited time.

Get Full Access

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.

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

Reviews

4.8 rating at LinkedIn Learning based on 345 ratings

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