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:
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
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: