
And these cells? They’re just divs set to flex. But notice how regardless of how many rows or columns we have, a Quick Stack element comes pre-populated with divs already inside, these are the cells. And that’s the secret: that’s all it is by default. Second and maybe most obvious, is that it sort of looks like a grid. When you first add a Quick Stack element, you can apply presets to give you a headstart. In fact, you can find Quick Stack right in the Add panel, and when you add it to your canvas – there’s a few things to notice.įirst, you have presets. In this lesson, we’re gonna talk about the anatomy of a Quick Stack element (how it works), then we’ll add stuff inside so we can build a layout, and then we’ll dig into a really important consideration: when should we use CSS grid or flexbox versus when should we use Quick Stack.Īnd let’s start there with an intro to Quick Stack. It takes most of the power from CSS grid and from flexbox, and it exposes that power in a direct, visual interface. The Quick Stack element in Webflow is one of the fastest and the most powerful ways to build the same kind of production-grade layouts you see from top developers all over the world.

Thank you so much, and best of luck to you. I just wanted to clarify so you don’t think all of Webflow changed on you - it didn’t.īut that’s it: a quick overview of some of the new stuff we launched since this course came out. These two elements are shortcuts that you’ll be able to use after this course - but again, they’re not necessary to follow along with Figma to Webflow.

Third, you may notice two other new elements in the Add panel: V Flex and H Flex. We actually added a video to the end of this course so you can cover that as well.

You can use Quick Stack and learn more about it. So if you’re following along with this course and you’re looking for the Grid element, you’ll now find it at the bottom of the Add panel - in Legacy. Second, when you get to Webflow, you’ll notice we shipped a new element called Quick Stack. The stuff we cover in this course includes the core fundamentals of developing in Webflow. Or, if you want to just try it out, you can do that as well. The fundamentals in this course are critical and I recommend using the plugin after going through the course. And there’s three things I want to share so you have the latest info:įirst, we shipped a new plugin that lets you directly import Figma designs right into Webflow. There’s been some new stuff we launched since we made this course.

Actually my full name is Grímur Björn Grímsson.
