INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

ELEMENTS

ELEMENTS

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div block

Div block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

3:20

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Lightbox

Lightbox

New

3:44

Map

Map

New

2:58

Dropdown

Dropdown

New

4:38

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Text Style Inheritance

Text Style Inheritance

New

3:18

Style Manager

Style Manager

New

1:56

States

States

New

2:47

Transitions

Transitions

New

2:40

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

Layout Basics

Layout Basics

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering elements with Flexbox

Centering elements with Flexbox

New

1:20

Equal height layouts with Flexbox

Equal height layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

Styling Typography

Styling Typography

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Google Fonts

Google Fonts

New

1:18

Custom Fonts

Custom Fonts

New

1:27

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

EFFECTS

EFFECTS

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Responsive Design

Responsive Design

New

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

This is a top-level overview of Grid 2.0 in Webflow. Among other things, Grid 2.0 introduces, of course, what Barrett calls “responsive magic.” For a number of CSS-driven layouts, grid is one of the fastest and most powerful ways to design and develop.

So we’re going to cover how to do four things: Create (and edit) a grid, Place content inside a grid, Move, span, and align stuff, and finally, Design a responsive grid.

Number 1.  Anything can be a grid. Almost anything. Here’s a section. Click grid? Now you have a grid. Here’s a div block. Click grid? Now you have a grid. On the elements panel? There’s a grid you can just drag right in. Collection list filled with dynamic content from the CMS? Set its display setting to a grid? Now you have a grid. That’s it.

And to edit a grid you created...press edit grid. That’s the first way. The second is to select the grid, and press the edit grid button on the canvas. Or, even faster: select a grid? Hit enter. Now you are editing the grid.

When you create a grid, and you’re editing that grid, you can add rows, you can add columns. You can delete a row. Or delete a column.

You can adjust the gaps in between rows and columns.

You can also do this on the canvas. Just click and drag and you can adjust that space (you can adjust those gaps) on the grid itself. If you want to make adjustments to the gaps between rows and columns, hold down shift while dragging.

It gets better. Want to adjust the columns themselves? You can do this, too; you can adjust sizing on a column by clicking and dragging — you can do this right on the canvas when you’re editing a grid.

When you’re done editing, just press escape, or, press the button that says “done.”

Second thing: Here’s a grid. It’s a 4x4: four columns...four rows. Let’s drag things into our grid. (All we’re doing is clicking and dragging, letting go when we place it in the grid.)

Notice how, by default, content is automatically placed. The children of the grid (the grid itself being the parent) — the children are just wrapping around and filling up the available cells. It’s doing this automatically regardless of where we’re dropping the content inside the grid.

Watch this: let’s grab this element and drag it into the bottom-right cell. What happens when we let go? It doesn’t go into that cell. Which is exactly what we’d expect, because it’s set to auto.

So what if we want to manually place something? Well, all we have to do is click that something, and press manual. And now? It’s manually placed. We can move it around anywhere in our grid. And when we do? Other content will wrap around it, and it’ll maintain its position wherever we placed it.

And if there’s something set to auto and we want to drag it somewhere specific? Hold down shift...and drag. Now that element which was auto is now manually placed. (It’s placed where you told it to go.)

Want to duplicate something? Hold down option or alt and drag that something somewhere else in the grid.

And we’re all thinking the same thing: can you drag in another grid? Yes. Gridception.

That’s putting stuff in a grid.

And how do we move stuff? We can drag to sort elements any way we’d like. Clicking...and dragging selects the content inside each cell. Not the cell itself. The cell (in fact, our entire grid) is like a guide. (All we’re doing is moving our elements around inside these guides.)

Again, automatically-placed items will fill up the next available space, but we can hold down shift and drag something to manually place it anywhere.

What if we want to center something in the cell? You can do this a few ways: we could select our grid parent (this is our element with grid applied) and simply center the children horizontally — and then center the children vertically. Everything will center inside each of those cells.

We could also affect alignment on the element itself. So this time the grid’s not selected; only this element is.

Or you can drag in a div block and use that div block to position content. Which means, yes, you can use flexbox and grid together. We have separate content that covers both flex and grid.

What if we want content to span multiple cells? Just click...and drag. That’s it. All we do is select the thing, and we click and drag.

Let’s talk responsive layouts. Generally, grids are automatically responsive. That means by default, they’ll take up the width of whatever they’re sitting inside. And as the browser gets narrower, everything will scale accordingly.

But if you want to change something in another view? Want to design for different devices? We can make that change. Even if we change the number of columns, and grid children set to auto? (If the children of a grid are automatically positioned?) They’ll wrap responsively just like you’d expect. Come back to desktop? Everything’s as it was.

That’s because changes cascade down, meaning when you change stuff on desktop, that affects tablet and mobile views. And things you add or change on tablet affect mobile. (There’s a pattern here.) Mobile landscape changes affect mobile portrait. And as we go down the different views, changes only affect smaller devices.

That’s responsively designing with grid.

So. We can add a grid just like any other element. We can drop things in a grid and they’re automatically placed. They’ll fill up empty space... unless, of course, you set something to manual, in which case you can get that child to do anything you want. Like parenting. Except not at all.

We can move those things inside grid. We can grab the corner and drag to span multiple cells. And at any time, we can edit the grid on multiple views to make sure it looks great on every device.

Now. We cover a lot more of this in our other content like auto-fit, the dense setting in grids — all of this is on Webflow University. So check that out if you haven’t already.

But that’s it for now. That’s a brief, top-level overview of Grid 2.0.