Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS property update: gap #34141

Merged
merged 5 commits into from
Jun 20, 2024
Merged

CSS property update: gap #34141

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e41389
CSS property update: gap
estelle Jun 14, 2024
a4c2c53
typo
estelle Jun 14, 2024
b117dc0
Update index.md
estelle Jun 18, 2024
def0b55
Apply suggestions from code review
estelle Jun 20, 2024
ea9a035
Update files/en-us/web/css/gap/index.md
estelle Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 30 additions & 11 deletions files/en-us/web/css/gap/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ browser-compat: css.properties.gap

{{CSSRef}}

The **`gap`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the gaps ({{glossary("gutters")}}) between rows and columns.

Early versions of the specification called this property `grid-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-gap` as an alias for `gap`.
The **`gap`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the gaps (also called {{glossary("gutters")}}) between rows and columns. This property applies to [multi-column](/en-US/docs/Web/CSS/CSS_multicol_layout), [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout), and [grid](/en-US/docs/Web/CSS/CSS_grid_layout) containers.

{{EmbedInteractiveExample("pages/css/gap.html")}}

Expand Down Expand Up @@ -55,16 +53,32 @@ gap: revert-layer;
gap: unset;
```

This property is specified as a value for `<'row-gap'>` followed optionally by a value for `<'column-gap'>`. If `<'column-gap'>` is omitted, it's set to the same value as `<'row-gap'>`.

`<'row-gap'>` and `<'column-gap'>` are each specified as a `<length>` or a `<percentage>`.

### Values

This property is specified as a value for `<'row-gap'>`, followed optionally by a value for `<'column-gap'>`. If `<'column-gap'>` is omitted, it is set to the same value as `<'row-gap'>`. Both `<'row-gap'>` and `<'column-gap'>` can be each specified as a `<length>` or a `<percentage>`.
estelle marked this conversation as resolved.
Show resolved Hide resolved

- {{CSSxRef("&lt;length&gt;")}}
- : Is the width of the gutter separating the grid lines.
- : Specifies the width of the gutter separating the columns, {{glossary("flex item","flex items")}}, flex lines, and {{glossary("grid lines")}},.
estelle marked this conversation as resolved.
Show resolved Hide resolved
- {{CSSxRef("&lt;percentage&gt;")}}
- : Is the width of the gutter separating the grid lines, relative to the dimension of the element.
- : Specifies the width of the gutter separating the columns, flex items, flex lines, and grid lines relative to the dimension of the element.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## Description

This property defines gaps between columns in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multi-column_layout), flex items and flex lines in [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout), and both rows and columns in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
estelle marked this conversation as resolved.
Show resolved Hide resolved

The generated gaps create empty space the width or height of the gap's size.
estelle marked this conversation as resolved.
Show resolved Hide resolved

In grid layout, the first value defines the gutter between rows and the second value sets the siz of the gutter between the column. In both grid and flex layouts, if only one value is included, that value is used for both dimensions.
estelle marked this conversation as resolved.
Show resolved Hide resolved

With flex containers, whether the first value is the gap between flex items or between flex line depends on the direction. Flex items are laid out in either rows or columns depending on the value of the {{cssxref("flex-direction")}} property. With rows (`row` (the default) or `row-reverse`), the first value defines the gap between flex lines and the second value defines the gap between items within each line. With columns, (when `flex-direction` is set to `column` or `column-reverse`) the first value defines the gap between flex items within a flex line and the second value defines the gaps between each flex line.
estelle marked this conversation as resolved.
Show resolved Hide resolved

In multi-column containers, the first value is the gap in between CSS columns. A dividing line can be added to the otherwise "empty space" via the {{cssxref("column-rule-style")}} property or {{cssxref("column-rule")}} shorthand.
estelle marked this conversation as resolved.
Show resolved Hide resolved

If the value is specified as a percentage, the property resolves the value relative to the size of the element's content box. When this size is definite, the behavior is well-defined and consistent across layout modes. As these three layout modes (multi-column, flex, and grid) treat cyclic percentage sizes differently, `gap` does so as well. In grid layout, cyclic percentage sizes resolve against zero for determining {{glossary("intrinsic size")}} contributions, but resolve against the box's content box when laying out the box's contents. In flex layout, cyclic percentage sizes always resolve against zero.
estelle marked this conversation as resolved.
Show resolved Hide resolved

The visible space between elements may differ from the specified `gap` value because margins, padding, and distributed alignment may increase the separation between elements beyond what is specified by `gap`.

Early versions of the specification called this property `grid-gap`, and to maintain compatibility with legacy websites, browsers still accept `grid-gap` as an alias for `gap`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think placing this historical info at the beginning of the "Description" section might be better for the flow of content.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better at the end because it's not important; whereas placing it at the beginning adds importance.


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While we're on this page, can we also change example headings to something like "Adding gap in flex layout" and so on?

## Formal definition

Expand Down Expand Up @@ -186,5 +200,10 @@ This property is specified as a value for `<'row-gap'>` followed optionally by a

## See also

- Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}
- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)_
- {{CSSxRef("row-gap")}}
- {{CSSxRef("column-gap")}}
- [Basic concepts of grid layout: gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)
- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
- [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) module