Sponsor: Quick testing across devices with this browser built for web developers.

When I was converting my Figma template to Framer yesterday, I suddenly wondered:

While working on the HTML-CSS, is anyone still using this Flexbox structure layout similar to this:

Section
┠Container
┃┠ Column
┃┖ Column

The first time I learned this method was with Bootstrap CSS. But there is a '.row' div to wrap the columns.

From my recent work. I've found that using a 'gap' on the column's parent is way more efficient.

Rather than adding more 'div' elements inside the columns just to have the space between them using padding or margin. We can use a 'flex-basis' calculation to maintain the gap.

The formula is: calc([column width's percentage] - [parent's gap value])

But first, the parent should have flex-wrap: wrap

We only add the percentage and gap value on a 'flex-basis' calculation. Then, set these calculations on each of your breakpoint targets.

Check this Codepen:

Share

Let me know your thought or you find a mistake/outdated content for this post.

Get the latest update of tutorials, inspirations and useful resources for website design and development to your email box