Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

row-gap

Specifies the spacing between items in the row direction (cross-axis direction) within a flex container or grid container.

Sample Code

/* Specify row spacing as 20px */
.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
}

/* Used in combination with column-gap */
.container-combo {
    display: flex;
    flex-wrap: wrap;
    row-gap: 32px;
    column-gap: 16px;
}

Available Values

Value	Description
normal	The initial value. In Flexbox, this is equivalent to 0.
<length>	Specifies the spacing using length values such as px, em, rem, etc.
<percentage>	Specifies the spacing as a percentage relative to the container's size.

Specification

Item	Details
Initial value	normal
Applies to	Flex containers, grid containers, and multi-column containers
Inherited	No
Animation	Possible (interpolated as length/percentage)

Browser Compatibility

Desktop

Chrome

47+ ○

46 and earlier ×

Firefox

52+ ○

51 and earlier ×

Safari

10.1+ ○

9 and earlier ×

Edge

16+ ○

Supported in all versions

11 ×

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

34+ ○

33 and earlier ×

Mobile

iOS Safari

10.3+ ○

9 and earlier ×

Android Browser

47+ ○

46 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN / Can I Use.

Details

'row-gap' is a property that specifies the spacing between items in the row direction. When 'flex-direction: row' and 'flex-wrap: wrap', it controls the spacing between rows that result from line wrapping. Use it when you want to adjust only the row spacing independently of 'column-gap'.

Differences from 'gap'

When setting the same value for both row and column spacing, a single 'gap' property suffices. When you want to set different values for row and column spacing, write 'gap: row-spacing column-spacing;' or specify 'row-gap' and 'column-gap' individually.

/* The following two are equivalent */
.container-a { gap: 32px 16px;}
.container-b { row-gap: 32px; column-gap: 16px;}

Related Properties

Property	Description
column-gap	Specifies the spacing in the column direction (main axis direction).
gap	Shorthand for specifying both 'row-gap' and 'column-gap' at once.

If you find any errors or copyright issues, please contact us.

Home