row-gap

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The row-gap property in CSS sets space (formally called “gutters”) between rows in CSS Grid, Flexbox, and CSS Columns layouts.

You can think of row-gap as the “next generation” or successor of grid-row-gap which was originally defined in the CSS Grid Layout specification. In an effort to extend that feature of grid so that it applies to flexbox and columns as well, the grid- prefix was dropped. It’s less specific to grid that way.

But it’s also a bit of a hassle if you’ve already been using grid-row-gap (as well as grid-gap and grid-column-gap for that matter) because it means we need to support the prefixed version until every browser makes the switch. The future-proof way to do that is to declare the prefixed property before row-gap. That way, browsers that support it will use it and those that don’t will go up the next level and get what they need.

.something {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 2rem; /* Will be used instead by browsers that do not support `row-gap` */
  row-gap: 2rem; /* Used by browsers that support `row-gap` */
}

Syntax

row-gap: normal | <length-percentage>
  • Initial value: normal
  • Applies to: multi-column containers, flex containers, grid containers
  • Inherited: no
  • Percentages: refer to corresponding dimension of the content area
  • Computed value: specified keyword, else a compute <length-percentage> value
  • Animation type: by computed value type

This syntax means that row-gap accepts a normal value (which is the default) or a specific length in units (e.g. 40px) or percentage (e.g. 5%).

Values

Aside from the normal value, row-gap accepts numbers and percentages. “Normal” means whatever is standard for the browser.

/* Default value */
row-gap: normal;

/* <length> values */
row-gap: 50px;
row-gap: 2rem;
row-gap: 1.5em;
row-gap: 5vw;
row-gap: 25ch;

/* <percentage> value */
row-gap: 15%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;

Demo

Browser support

Browser support can be split up by whether or not row-gap is supported by CSS Grid or Flexbox.

Grid layout support

IEEdgeFirefoxChromeSafariOpera
No16+61+66+12.1+53+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+81+12+All
Source: caniuse

Flexbox layout support

IEEdgeFirefoxChromeSafariOpera
No84+63+85+No70+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+NoNoAll
Source: caniuse

Further reading