Lesson info


Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here


We took some time and paced around our San Francisco office, asking those in house for thoughts on CSS grid: designers, writers, frontend engineers, operations managers, CEOs. We got on AIM and reached out to team members in Vegas, Mexico, and England, and Lebanon, and Russia. And we learned a lot about how people approach the subject.

When you first hear about CSS grid? It's one of those things that just makes sense. The idea of a grid you can build...and tweak... The idea of using a grid like this? Pretty empowering.

Then people do research. And their hearts and minds and even their clavicles break into thirds. There are literal books. And support groups. Why? The amount of things you need to know to be proficient in CSS grid is profound.

So our goal is simple: it's to demystify grid. We're going to cover everything you need to know to get set up with grid so you can start using it to create your own layouts. You can clone and tweak any of the example projects we made to get a head start.

We'll also link you to some incredible resources — how designers and developers throughout the industry are using CSS grid to build some really exciting things.

As for us, we have our full course on Webflow University, we have the cloneable layouts you can tweak and use to your heart's content, and then there's a grid playground, which the FDA requires us to describe as "an addictive chemical."

Whatever route you take, you can build the most brilliant layouts on the planet. And you're doing it with grid. In Webflow.

Related tutorial