On April 9, 2020, I learned...

The grid-gap property is being replaced by gap

Well, I technically learned this back on March 30 as you’ll see in the comment thread but here we are on April 9.

I might use grid-gap more than 90% of the time I work with CSS Grid layouts. It’s so nice to have a way to create vertical and horizontal spacing between grid items that is automatically calculated into the grid container’s placement and position.

That’s why I was surprised to hear it’s been deprecated in favor of the more simple gap property. They’re the same, except that gap can be used on flex items in addition to grid containers. Makes a whole lot of sense if you ask me. Spacing in flexbox has been begging for this sort of thing. And to hear it straight from Rachel Andrew in that same comment thread makes it all the more crucial to start thinking about.

I can’t imagine grid-gap will lost browser support, given how widely it’s used in grid layouts. That said, gap support should start building and you’ll bet I’ll start moving in that direction.

Leave a Reply

Markdown supported