What is the difference between Webflow and Aladdin’s lamp? The latter only grants you three wishes. Now it's time to beat the genie, so we will give full power to the 3 ready-to-use flexbox design patterns we implemented in this series with a tiny bit of custom code.
All the articles in this series are based upon an amazing video from Kevin Powell, building all these patterns with pure HTML and CSS.
In this bonus blog post, we are going to exploit the gap CSS property to set gaps betwen rows and columns.
Do you want a completely cloneable project with all these 3 + 1 flexbox layouts? There you go. Here is a link to my Webflow resource project for you to share with the world.
Code is all we need (a tiny bit of)
Having our flexbox layout in place, we just need to embed a couple of lines of code in our page:
Here, flex-container is the name of the class we assigned to our flexbox parent container. All we have to do is simply state how much gap we want between each couple of rows and colums within our flexbox layout.
After applying this code to each of our 3 ready-to-use flexbox layouts, we would achieve results like in the following pictures.
Equal columns. At all times
Grid-ish layout
Content-and-sidebar Layout
Mind the gap
As a side note, we have to say that in the content-and-sidebar layout we could have to tweak the basis property for either the content or the sidebar part of our layout, in order to take the gap into account and prevent our layout to always wrap to the next line.
We are now at the very end of this first blog post series. If you want to dive deeper into the gap CSS property, check out the article on gap CSS property at MDN.
