Gap - CSS Property
This page is also about physical property(ies):
column-gap).gap).row-gap).Summary of characteristics of the gap property
normalnormalComputed value: during an animation, the gap property gradually changes from one value to another.Per grammar: serialization in the order of syntax.Syntax diagram of gap.
gap property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a numeric value followed by one of CSS dimension units.%is a percentage whose evaluation corresponds to a dimension.
Description of the gap property.
gap sets the spacing between rows and between columns in the context of a grid, a flex-box, or a column layout. Tables are not affected
by this property. gap is a shorthand property that is equivalent to the following two properties:
row-gap: Defines the space between the lines of a grid.column-gap: Sets the spacing between columns.
Also note the synonym properties, originally defined for grids, but which can now be overlooked in favor of more general properties:
grid-row-gapproperty equivalent torow-gap.grid-column-gapequivalent tocolumn-gap.grid-gapequivalent togap.
Case of a grid.
In the case of a grid, column-gap and row-gap define the horizontal and vertical spacing between the cells of
the grid in a multi-column layout
For a more detailed presentation of the grids, refer to the page grids.
Case of a flex-box.
The column-gap and row-gap properties set the horizontal and vertical spacing between the flex-box items.
For a more detailed presentation of flex-box, refer to the page on The flex-box.
Case of a multi-column layout.
The space between two columns of text is called a "gutter." gap therefore sets the width of the gutter. row-gap
has no effect in this case. If a dividing line is drawn between the columns (see column-rule ), its thickness is taken from what is
defined by 
gap, so the gutter width will not be increased by the presence of a line.
For a general overview of column layouts, refer to the explanations on the page column layout.
Note that the property gap or the corresponding detailed properties do not apply to table.
Values for gap.
- gap: normal;
Set the spacing to
0if it's a grid or a flex container, and to1emif it's a column layout. - gap: 5px 8px; lig col
The first value indicates the spacing between lines, the second value is the spacing between columns. These are two positive or zero values, followed by one of CSS dimension units.
If only one value is given, it applies to both spacings.Percentages are calculated relative to the height of the element for the first value and relative to the width of the element for the second value.
- row-gap: 5px; column-gap: 10px;
The detailed properties can be used if you only want to set either horizontal or vertical spacing. For example, in the case of a column layout, you’d rather use
column-gap. - gap: initial; (
normal) gap: inherit; gap: revert; gap: revert-layer; gap: revert-rule; gap: unset;column-gap: initial; (normal) column-gap: inherit; column-gap: revert; column-gap: revert-layer; column-gap: revert-rule; column-gap: unset;row-gap: initial; (normal) row-gap: inherit; row-gap: revert; row-gap: revert-layer; row-gap: revert-rule; row-gap: unset;For more information, refer to the presentation pages of these different values:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the gap property.
Like most properties that accept numeric values, gap can be animated gradually. The visual result isn't particularly interesting.
Here's what it looks like in a column layout.
gap property.For this demonstration, this property has been animated. You can check out the animation code and the rules applied to this element by clicking the button above.
Access the gap property via a program
Adjust spacing with gap and JavaScript.
Two JavaScript syntaxes allow you to change the value of a property. The example sets a value of 5 pixels to the property gap.
let el = document.getElementById('id');
el.style['gap'] = '5px';
// or
let el = document.getElementById('id');
el.style.gap = '5px';
Reread the spacing values in Javascript.
The code below reads the value of the property gap that was set in the HTML code using the style attribute.
If the value was set via a CSS selector, it won't be returned. This code returns the value of gap in the same unit that was used to set it.
let el = document.getElementById('id');
let value = el.style['gap'];
// or
let el = document.getElementById('id');
let value = el.style.gap;
Read the computed value of gap in Javascript.
The computed value is the one that comes from evaluating the relative units and resolving the cascade of inheritance. In order of priority, it will be
the value set via the style attribute, the value set via a CSS selector or an inherited value, and, as a last resort, the property's initial
value (normalgap).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('gap');
Read or change the spacing value with JQuery.
JQuery also allows modifying or reading the gap property, with a shorter syntax than JavaScript.
$('#id').css('gap', '5px');
Read the computed value of the property gap with JQuery.
Like in JavaScript, the value is returned in pixels, even if it was set in another unit.
let value = $('#id').css('gap');
Other code examples.
You can find other examples of code in Javascript and JQuery on the Javascript and CSS page, still for working with CSS.
Test it yourself.
The buttons below apply the entered value to the gap property and then display either the value as it was applied, or the computed value.
This second option lets you see how the value of gap is stored (serialized). In particular, you can see that percentages are correctly
stored as percentages, while all other units are converted to pixels.
Simulator.
The effect of gap is shown on a grid, on a flex-box, and on a column layout.
You can see that the default value normal isn't the same in each case.
For a column layout, normal is roughly 1em, while normal is zero in the case of a grid or a flex-box.
Warning! In the case of a flex-box, the justify-content property can add extra spacing to justify the elements, especially with the values
space-around, space-between, and space-evenly.
Browsers compatibility with gap.
Support for the properties row-gap, column-gap, and the shorthand property gap is generally good.
column-gap, row-gap, and the shorthand property gap, in the context of a grid container.column-gap, row-gap, and the shorthand property gap, in the context of a flexbox container.column-gap, row-gap and the shorthand property gap, in the context of a multi-column container.gapproperty
(grid)
gapproperty
(flex-box)
gapproperty
(columns)
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the gap property.
-
CSS Grid Layout Module Level 1
This specification defines how to create layouts in the form of grids, composed of rows and columns, with a document structure that remains very simple: a container and as many elements as there are cells. Much simpler in any case than tables.
Each of the cells can be aligned horizontally within the width of the columns, or vertically within the height of the rows. They can also be distributed or enlarged to cover all the available space. The content of each of the cells can be aligned horizontally and vertically.
A new unit (fr) is available for sizing columns or rows.RegardinggapDefining therow-gap,column-gap, andgapproperties in the context of a grid.
April 07, 2011Working Draft.
September 29, 2016Candidate Recommendation.
-
CSS Multi-column Layout Module Level 1
This specification describes multi-column layout. It is enough to set the number of columns on the container, and the content will be arranged across the specified number of columns. Of course, other properties allow finer control over multi-column containers.
This specification also defines properties concerning the space between columns and any possible dividing line.RegardinggapDefining therow-gap,column-gap, andgapproperties in the context of multi-column layout.June 23, 1999Working Draft.December 17, 2009Candidate Recommendation. -
CSS Grid Layout Module Level 2
This level 2 of the grid specification introduces the concept of a subgrid. It is about grids nested within another, with the preservation of column and/or row alignment.
RegardinggapNo change to therow-gap,column-gapandgapproperties.February 06, 2018Working Draft.August 18, 2020Candidate Recommendation. -
CSS Box Alignment Module Level 3
This specification module defines the CSS features regarding the alignment of boxes inside their containers in the different CSS layout models: block layout, table layout, flexible layout, and grid layout.
RegardinggapBlock positioning and sizing properties are now grouped in the “Box Alignment” module.June 12, 2012Working Draft.
Other positioning, alignment, or sizing properties of blocks.
All these properties are now grouped in the specification "CSS Box Alignment Module".
Properties:
column-gap).gap).row-gap).