Summary

If you're used to working with static design tools that let you drag and drop elements anywhere, building for the web can be a tough transition. This course on CSS layout and positioning covers the core concepts you'll need to start building with confidence for the web. You'll come away understanding the relationship between page elements and the many layout options available.

Use this version to clone the completed project
Blank pages without hitting page limits
Enroll for free

Lessons in this course

Intro to the box model
1:54
Coming soon

Layout settings
3:51
Coming soon

Display settings
9:50
Coming soon

Spacing
6:28
Coming soon

Size
17:35
Coming soon

Position
16:51
Coming soon

Flexbox
9:00
Coming soon

Center elements with flexbox
1:20
Coming soon

Equal height layouts with flexbox
1:47
Coming soon

Grid
21:17
Coming soon

Flexbox vs. Grid
4:00
Coming soon

Enable relative position
1:43
Coming soon

Absolute Positioning
1:43
Coming soon

Apply a z-index value
1:49
Coming soon

Hide overflowing content
1:49
Coming soon

Fixed positioning
1:27
Coming soon

CSS layout & positioning

17
Lessons

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Intro to the box model

Download assets
Clone this project
Transcript
Learn more

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Download assets
Clone this project
Transcript
Learn more

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Download assets
Clone this project
Transcript
Learn more

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Download assets
Clone this project
Transcript
Learn more

Center elements with flexbox

Download assets
Clone this project
Transcript
Learn more

Equal height layouts with flexbox

Download assets
Clone this project
Transcript
Learn more

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Download assets
Clone this project
Transcript
Learn more

Flexbox vs. Grid

The similarities and differences between flexbox and grid — what to use and when.

Download assets
Clone this project
Transcript
Learn more

Enable relative position

Download assets
Clone this project
Transcript
Learn more

Absolute Positioning

Download assets
Clone this project
Transcript
Learn more

Apply a z-index value

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements
Download assets
Clone this project
Transcript
Learn more

Hide overflowing content

Download assets
Clone this project
Transcript
Learn more

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits
Download course assets

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

Stacy Han

Video Producer

Grímur Grimsson

Video Producer

Designs by

-

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.