From the course: No-Code CSS Layouts with Webflow

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Introducing Grid

Introducing Grid - Webflow Tutorial

From the course: No-Code CSS Layouts with Webflow

Start my 1-month free trial Buy for my team

Introducing Grid

“

- [Presenter] Grid is what the name implies. A way to lay out webpages in the horizontal and vertical direction. Grid is super helpful in laying out webpages for this reason. So let's take a closer look at how Grid works. What I'm going to do is I am going to start by taking my section flex box on this page, the whole section, and I'm going to copy, paste. So I'm just going to make a second copy of my section flex box. In that first instance of section flex box, I am going to rework this, so we can look at grid instead. And I'm going to do that by, what I'm going to do is duplicate this class, and I'm going to call it section-grid. The container can stay as is. The flex parent, we're going to actually just remove that class altogether. And I'm going to create a new class, I'm going to call it grid-parent. And then the classes that are here on the paragraphs, I'm going to remove them as well. I'll just remove all these classes and then I'll set up new classes and this will be…

Contents