With a margin: 0 20px on each flex item, we’d end up with: For example, if we’re trying to introduce some space in between flex items, not around them, margin would require special cases to remove extra margins before the first item and after the last one. On top of this, gaps do the right thing by default with just one line of code. This can get complicated when items are different in nature, or come from different reusable components. Using margins would require a declaration on each and every item. This means we define them once for the entire layout and they are applied consistently within it. But gap comes with multiple advantages.įirst, gaps are defined at the container level. Yes, in most cases we can also use margin (and/or padding) to add visual space between elements of a layout. So, to visually separate the items out a bit more, we need to use padding or margin on the items, which isn’t as great… as we’ll see in the next section. The gap here acts as a border width instead. While this works, it means we’re unable to use gaps to introduce space between items. One is to give the grid container a background color, then a different color for the items, and finally a gap to make the container color show through. In the meantime, there are ways around this. Once we have a working implementation in Firefox along with the spec proposal, perhaps it will drive implementation in other browsers. This has been discussed over at the CSS working group and is in the works in Firefox. But the good news is that it could be in the near future. The sad news is that it isn’t supported anywhere today. Styling gap in Flexbox and CSS Grid would be really useful. So, overall, the gap property is well supported and, in most cases, workarounds are unnecessary.
Gap is really well-supported across the board. container The column-rule property gives us some styling affordance in a multi-column layout. Let’s create a grid with three columns and two rows. column-gap introduces space between column tracks.row-gap introduces space between row tracks.Grid gapsĪll browsers support gaps in grid layouts, and they’re quite simple to understand in this context. If you’re like me, you’ve used gaps in grid layouts, but they can now be used in Flexbox, as well as multi-column layouts. Our understanding of these properties depends on the type of CSS layout we’re using.
Hence, grid-gap is the same as gap, grid-column-gap is the same as column-gap and grid-row-gap is the same as row-gap.Īs for the other three properties, knowing that gap is a shorthand that lets you specify the other two properties, we really only need to know what row-gap and column-gap do. Browsers still support these deprecated grid-* properties (as of this writing) and merely treat them as if the grid- prefix is not present. The grid-* properties were added early when CSS Grid’s specifications were being drafted, and later deprecated when gap became more generalized. There are six in total:įrom this list, we can already ignore the first three properties. To start us off, let’s review all of the CSS properties related to gap. Let’s take a proper look at gap and its associated properties, and understand how and where they work. That, and the fact that I believe the property is more complicated than it appears, made me want to go back and explain exactly how it works. It isn’t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. You might already know about the CSS gap property.
0 kommentar(er)
