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

Simplilearn

Lead AI-Native Products with Microsoft's Agentic AI Program

DataCamp

PowerBI Data Analyst - Create visualizations and dashboards from scratch

Overview

Build a Learning Habit

Download Class Central's free printable study calendar

Download for Free

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, part 1
Exercise: Build a layout with Flexbox, part 2

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
Exercise: Create a sticky footer with Grid

Conclusion

Next steps and resources

Taught by

Christina Truong

Reviews

4.8 rating at LinkedIn Learning based on 401 ratings

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