Row-gap

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;