Search code examples
htmlcssflexboxgrid-layout

How to set a specific flexbox gap in CSS

I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. Here's a diagram of what I want:

The blue element grows to fill the space, but has a 1px gap in between every element.

How do I create this fixed width gap?

Potential non-flexbox solution

I didn't know how to achieve that precise 1 pixel gap in flexbox, so I was trying to create it in a grid layout. I ran into a different issue of not having a flex-grow property for grid children:

.box {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1px;
}
.big-element {
  // <- Need something similar to flex-grow for this element
}
Solution

  • The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers. With the gap property, you can get what you want just by adding a column-gap: 1px rule.