Complete Webflow Quickstack Tutorial (Better than Grid?!)

Learn how to build Grid Layouts in Webflow with the new Quickstack element. Quickstack is a faster way to build Grid Layouts, and is often easier to use than the normal Webflow grids.
▶ Clone the Quickstack project:
webflow.grsm.io/quickstack *
▶ Build Multi-Step Forms in Webflow
inputflow.io
#webflow
* The description of this video contains affiliate links (marked with *), which means that if you sign up for one of the tools that I recommend and decide to switch to the paid plan, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support!

[@mikepecha]

▶ Build Multi-Step Forms in Webflow:
inputflow.io

[@jevgenisuija]

Nice tutorial, thanks!

[@samuelelijas9002]

Excellent video!

[@zoltanzsamboki9841]

And again a super usefull content Mike, just as always. Tnx.

[@mikepecha]

Glad you enjoyed it, Zoltan :)

[@mateusvidal3187]

Maaany thanks Mike! This video was perfect to answer all my doubts!

[@mikepecha]

Awesome. Happy to hear that, Mateus :)

[@micdouglass]

Great, thanks Mike!

[@micdouglass]

good point about not changing the FR sizes in the grid editor! I've been keeping them at 1fr too.

[@user-bf5ff9ss7o]

very good explaining Mike. love it! thanks. Jan

[@mikepecha]

Thanks Jan :)

[@TrutherTalk]

Thank you for this tutorial. I really appreciate it. ;-)

[@mikepecha]

You're very welcome!

[@Idowu_Adeleke]

Nice one Mike

[@mikepecha]

Thanks :)

[@floyd1411]

Hi, thank you for the tutorials. Any chance you could do a tutorial on responsiveness using REM units and percentage?

[@mikepecha]

Good idea!

[@floyd1411]

@@mikepecha if I may add. you know one of the issues I faced when using quick stack is to change the order of items on desktop and mobile. And I was just hoping for a happy mistake by playing around with First and Last. I was wondering if there was an easier way of doing that too. If and when you have the time, you could cover that too :)
Thank you for your tutorials it really helps. Cheers

[@nironathan2490]

Nice content, dude! Keep it up.
Can you tell me which program you use for capture and edit for your tutorials?
Cheers
Niro

[@mikepecha]

OBS and Camtasia

[@ryangamble509]

Great tutorial, thank you. quick Q: Is there any way to background color a row, I can only seem to add a background color to each cell and then the spacing in between each cell is white. Kinda trying to create a header row with light grey background for just that first row, and then all subsequent rows are transparent.

[@mikepecha]

Not that I know of, what are you trying to build?

[@stuart2151]

Thanks for this, with regards to the black gradient.. Did you do this in photoshop or webflow? Thanks!

[@mikepecha]

Yes, it is applied as a background gradient in Webflow

[@stuart2151]

@@mikepecha amazing! Thank you!

[@suman121069]

♥

[@crooker2]

Can you use a quick stack to wrap a dynamic collection? It seems pretty static with the columns/rows.
I havent used the quick stack yet, but it doesn't seem very dynamic.

[@mikepecha]

Hi @crooker2, your observation is correct. You can't use a Quickstack as a wrapper for a collection list, where a dynamic number of children would be displayed.
Quickstack is made for static grid layouts with a known number of grid elements.
So for layouts with a CMS List => Go with the grid element.
For static layouts => Choose the one you prefer building with

[@stjohnspresbymedhat]

@@mikepechaHopefully they work on that. Quickstack would be a great way to build interesting dynamic content layouts in a repeating grid (like a cool masonry grid)