row-gap

Sets the size of the gap (gutter) between rows in a Grid, Flexbox, or Multi-column layout.

It is documented as part of the CSS Box Alignment specification.

/* Usage Example */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* only adds space BETWEEN the rows, not columns */
  row-gap: 20px;
}

/* Syntax */
row-gap: normal;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;
Widely available Since 2017 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

47+
52+
10.1+
16+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC