It's been almost a month since Webflow introduced the "flexgap" in the Webflow Designer.
The flexgap allows you to add horizontal and vertical spacing between elements, similar to a grid, but within a flexbox !
So... is this the end of grids?
Flexbox vs Grid
I've long been a big fan of using GRIDs in Webflow... but this new feature is reshuffling the deck.
I appreciated using grids to ensure a balanced distribution of my elements and easily make them responsive by adding or removing columns, but..
New Use Cases for Flexbox
So far, I've encountered two practical applications that allow me to speed up development or reduce DOM nesting in Webflow thanks to this new flexbox spacing feature:
- Replacing the <!-- fs-richtext-ignore --><div> margin + direction in client-first development methodology
- Replacing a grid with a flexbox and organizing mobile responsiveness with either horizontal or vertical direction
Furthermore... This new version of the flexbox layout seems much simpler to use than a grid for a client who is not familiar with Webflow.
Conclusion
My initial tests with this new flexbox gap feature encourage me to use it more frequently and to rethink my approach to building in Webflow. The Flexbox Gap enhances the CSS layout arsenal offered by flexbox, which now, in my opinion, covers 360° of web design needs.
I believe we can expect to see the flexbox gap become mainstream in websites developed with the Webflow CMS.
To be continued...
