This is a massive time saver - def a great addition to Webflow! Curious to see how Relume Library and similar component libraries will incorporate Quick Stack.
I wish this was useful across several pages (or a whole site) as a layout tool, but I see unique node IDs are created for each set. This would generate a rather bloated CSS file. This is the reason I've stayed away from using grid in my projects. Is there something I'm missing?
Quick Stack does come with additional structure and styling out of the box. In some cases or for more intricate layouts, Quick Stack may be more structure than you need. For CSS grid, since it’s just a display property, it’s lightweight in terms of adding CSS (other than row/column on the parent element and position/span/etc on the child elements). You could use grid areas to reuse classes to keep the layouts consistent and the CSS very minimal. (Edited this response to more accurately reflect the difference between Quick Stack and CSS grid)
Hi, that is correct. You cannot move or overlap cells. For more advanced two-dimension layouts, you can use CSS grid (which you can find in the Style panel under Display). Learn more about styling cells in a Quick Stack: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-cell
Overall great feature! One limitation I've run into is you can't turn quickstack cells into components, despite them technically being divs. I was building out cards in a grid layout using quickstack, and I wanted to turn one of the cards into a component, but alas... I could not. Another limitation is you can't change the position type of a quickstack cell. I was trying to create a stacked image look in a quickstack cell, but I couldn't change the position type.
Hi, @jansleyreal! Just like with CSS grid, you can add a div inside any cell and achieve either of the two things you're looking to achieve (componentizing a div or creating custom layouts with that div).
That is correct. The columns and rows in CSS grid are just guides and there’s nothing in grid “cells” until you add elements. Typically, you drag in a div to fill a grid cell, then nest elements within the div.
At this time, you cannot rearrange cells in a Quick Stack grid. However you can wrap child elements in each cell in a div and cut/paste them into another cell. Another option is to use the regular Grid element. Hope this helps :)
Adding and removing rows and columns affect the element's HTML structure, and HTML changes are affected on all breakpoints. Learn more about using Quick Stack on different breakpoints: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-on-different-breakpoints
Merging cells affect the element's HTML structure, and HTML changes are affected on all breakpoints. Learn more about using Quick Stack on different breakpoints: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-on-different-breakpoints
Quick Stack is meant for an overall grid layout. Not for Collection lists. When you add a Collection list to the page, you can still set the Collection List (not the wrapper) to grid or flex. However, you can use Quick Stack in a Collection Item.
@@Webflow So why is this not shown in this video then?? Is that not pretty the most essential feature?? Because it is not obvisouse, I am looking for it since I while now.
You can't change its `display` property and number of cells on mobile breakpoints? No, thanks. Flexbox and CSS Grid are perfect and are enough to build everything you want.
20 years after purists decided to plague the internet with divception on the premise that "tables aren't semantically correct for layouts"... We have a replacement. Bravo HTML5...bravo.
@@themikias ...no, really weird takeaway... I'm saying that until we had a replacement, the demonization of them in favor of far inferior box modeling was dysfunctional reasoning, and it took this long to get something comparable. I made the switch then because it was the thing to do. It was still stupid. Grid and flex features are better than tables. Tables were better than divveption, float, margin and position hacks...by far.
@@stephenr85 I see, but it was part of the process to get to the replacement. We wouldn't have flex or grid if it wasn't for divception period and continuing dev with tables was just painful. Let's just say it was a transitional period that needed to happen.
@@themikias not true. There's no reason for 2 decades we had to use a solution inferior to a feature that already existed while they came up with something "semantically correct" that, yes, also happens to have many wish-list features because IT'S BEEN 20 YEARS LOL...
![Chino Pacas - Modo Capone (with Drake & Fuerza Regida) [Video Oficial]](http://i.ytimg.com/vi/zjv8TQ0gBkg/mqdefault.jpg)
I love this person's sense of humor and charisma. What an asset!
Amazing addition it will make the resposive and more dynamic layout to be designed more quickly.
What an amazing improvement ! Bravo team webflow
This is a massive time saver - def a great addition to Webflow! Curious to see how Relume Library and similar component libraries will incorporate Quick Stack.
Wonderful! This will be much better than the grid element which doesn't always do what I want it to do
Can't wait to use it.
I dont see "Preset" window. How can I access it?
Simply amazing cant wait to quick stack things
Cool! But why did you move the Grid element down to the bottom in the "others" section?
Takes me back to the times we built the web with tables. Good times!
You and I remember Budapest very differently.
Mega welcome - well done team!
This is amazing!
Love this! Great feature
yeah thanks for explaining how to make them responsive. 🤯
man i've been waiting for this for ages
I wish this was useful across several pages (or a whole site) as a layout tool, but I see unique node IDs are created for each set. This would generate a rather bloated CSS file. This is the reason I've stayed away from using grid in my projects. Is there something I'm missing?
Quick Stack does come with additional structure and styling out of the box. In some cases or for more intricate layouts, Quick Stack may be more structure than you need.
For CSS grid, since it’s just a display property, it’s lightweight in terms of adding CSS (other than row/column on the parent element and position/span/etc on the child elements). You could use grid areas to reuse classes to keep the layouts consistent and the CSS very minimal.
(Edited this response to more accurately reflect the difference between Quick Stack and CSS grid)
Such a great tutorial! Thank you so much!
Great one!
Great tool, thank you! It looks like one cannot set the cells to "manual", thus cannot create overlapping elements. Maybe am I overlooking something?
Hi, that is correct. You cannot move or overlap cells. For more advanced two-dimension layouts, you can use CSS grid (which you can find in the Style panel under Display).
Learn more about styling cells in a Quick Stack: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-cell
@@Webflow 😊
Overall great feature! One limitation I've run into is you can't turn quickstack cells into components, despite them technically being divs. I was building out cards in a grid layout using quickstack, and I wanted to turn one of the cards into a component, but alas... I could not.
Another limitation is you can't change the position type of a quickstack cell. I was trying to create a stacked image look in a quickstack cell, but I couldn't change the position type.
Hi, @jansleyreal! Just like with CSS grid, you can add a div inside any cell and achieve either of the two things you're looking to achieve (componentizing a div or creating custom layouts with that div).
Are we able to adjust position of cells?
What does he mean by "nothing really there" in CSS grid? I do have to add a div into each cell or something but thats it. Does he mean that?
That is correct. The columns and rows in CSS grid are just guides and there’s nothing in grid “cells” until you add elements. Typically, you drag in a div to fill a grid cell, then nest elements within the div.
THANK YOU WEBFLOW!
Massive for new comers
thank you webflow
Love this, nice one Webflow.
Absolutely huge
Does someone know how to create the overlapping elements like at 5:04?
Very cool
The dude is great!
Awesome. Well done webflow.
can we add cms collections?
While you cannot apply Quick Stack to a Collection List, you can add Quick Stack to a Collection Item.
How would you rearrange the cells? It doesn't have an option to do that
At this time, you cannot rearrange cells in a Quick Stack grid. However you can wrap child elements in each cell in a div and cut/paste them into another cell.
Another option is to use the regular Grid element.
Hope this helps :)
I have 2 cells by default when I try to make more grids to get more cells I get nothing.
how to make quickstack responsive?! when i go on tablet layout i can not add additional rows to make it one below other.
Adding and removing rows and columns affect the element's HTML structure, and HTML changes are affected on all breakpoints. Learn more about using Quick Stack on different breakpoints: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-on-different-breakpoints
!!! Let's gooooo!!
Why can I not use merging other then on desktop?
Merging cells affect the element's HTML structure, and HTML changes are affected on all breakpoints. Learn more about using Quick Stack on different breakpoints: university.webflow.com/lesson/quick-stack#how-to-style-a-quick-stack-on-different-breakpoints
"you can do stuff like merge these cells" - how?
It doesn’t work for me can you help
Hi! Happy to help. What behavior are you experiencing?
🔥🔥🔥
I love it
Hmm... Ok. So can you create repeating quickstacks with a collection? I. E. Every sixth element is 2x2, and the rest are 1x1?
Quick Stack is meant for an overall grid layout. Not for Collection lists. When you add a Collection list to the page, you can still set the Collection List (not the wrapper) to grid or flex.
However, you can use Quick Stack in a Collection Item.
@@Webflow Understandable. I was hoping for Magical. I will settle for Mystical. Thanks for everything you do.
❤
It is crazy that in times of 80-90% mobile traffic your videos are still only done for desktop...
You can style a Quick Stack on different breakpoints, mobile and tablet included.
@@Webflow So why is this not shown in this video then?? Is that not pretty the most essential feature?? Because it is not obvisouse, I am looking for it since I while now.
Nice. Now give us native multi-language PLEASE
You can't change its `display` property and number of cells on mobile breakpoints? No, thanks. Flexbox and CSS Grid are perfect and are enough to build everything you want.
Webflow, build with the power of co....webflow
2:17
Yummy
20 years after purists decided to plague the internet with divception on the premise that "tables aren't semantically correct for layouts"... We have a replacement. Bravo HTML5...bravo.
Are you seriously vouching for tables in 2023? I'm curious why you think using tables is still the way to develop for the web.
@@themikias ...no, really weird takeaway... I'm saying that until we had a replacement, the demonization of them in favor of far inferior box modeling was dysfunctional reasoning, and it took this long to get something comparable. I made the switch then because it was the thing to do. It was still stupid. Grid and flex features are better than tables. Tables were better than divveption, float, margin and position hacks...by far.
@@stephenr85 I see, but it was part of the process to get to the replacement. We wouldn't have flex or grid if it wasn't for divception period and continuing dev with tables was just painful. Let's just say it was a transitional period that needed to happen.
@@themikias not true. There's no reason for 2 decades we had to use a solution inferior to a feature that already existed while they came up with something "semantically correct" that, yes, also happens to have many wish-list features because IT'S BEEN 20 YEARS LOL...
I thought I will just say this to a girl but I love you so much webflow🤍such a nice feature to introduce