DEV Community

CSS Gap creates a bright future for margins in Flex as well as Grid

Bryan Robinson on August 29, 2019

** Quick warning: Gap for Flex currently only works in Firefox ** One of my many favorite parts of the CSS Grid specification is grid-gap. It ma...
Collapse
 
cecilelebleu profile image
Cécile Lebleu

I read half of the post yesterday, implemented it on the project I’m working on —where te gap was driving me crazy— and...oh, no! Why! Why doesn’t it work! And Firefox? Wait, it does! But I thought I was using normalize.css? I am?? What the...? WHY IS THIS [deleted scene]

And now I understand why : )

Thanks for sharing though, I hope other browsers catch up soon!

Collapse
 
brob profile image
Bryan Robinson

Sorry about that! Just put a warning as the first sentence of the post ;)

Probably, shouldn’t be buried at the end, huh? :D

Collapse
 
cecilelebleu profile image
Cécile Lebleu

No, it’s 100% my fault for not reading through the end 😅

Thread Thread
 
brob profile image
Bryan Robinson

I totally do it too! That’s why for experimental browser stuff I should post at the top :D

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

Since you have to specify the alignment, justification, and even just the use of flexbox in the parent, it has never made sense to me that gaps between items had to happen from child spacing properties. This is a much needed improvement, glad it's being worked on!

Collapse
 
brob profile image
Bryan Robinson

Completely agree! Though, that WAS the way the web worked. Now that we're getting first-class layout controls, it makes sense to make them ideal and "hackless" :D

Collapse
 
danielkun profile image
Daniel Albuschat

Looking forward to be able to use this! I wrote the same functionality for WPF many years ago, and it served very well.

Here's the appropriate link to caniuse:
caniuse.com/#feat=flexbox-gap

Collapse
 
brob profile image
Bryan Robinson

Totally should have put that caniuse in the post!

Collapse
 
danielkun profile image
Daniel Albuschat

It's never too late ;-)