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 2 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
33 changes: 24 additions & 9 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 ({{glossary("gutters")}}) between rows and columns. This property applies to [multi-column](/en-US/docs/Web/CSS/CSS_multicol_layout) containers, [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout) containers, and [grid]((/en-US/docs/Web/CSS/CSS_grid_layout) containers.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

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

Expand Down Expand Up @@ -55,17 +53,29 @@ 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's set to the same value as `<'row-gap'>`. `<'row-gap'>` and `<'column-gap'>` are each specified as a `<length>` or a `<percentage>`.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

- {{CSSxRef("&lt;length&gt;")}}
- : Is the width of the gutter separating the grid lines.
dipikabh 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.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

## Description

This property defines gaps between columns in CSS multi-column layout, flex items and flex lines in flexible box layout, and both rows and columns in CSS grid layout.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

The generated gaps create empty tracks the width or height of the gap's size. In multi-column containers, the first value is the gap is between CSS columns. In grid layout, the first value defines the gutter between rows and the second value sets the siz of the gutter between the column. If only one value is included, that value is used for both dimensions, in both grid and flex layouts.

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.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved
estelle marked this conversation as resolved.
Show resolved Hide resolved

The property resolves percentages against the size of the content box. When this size is definite, the behavior is well-defined and consistent across layout modes. As these three layout modes treat cyclic percentage sizes differently, `gap` does 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.
Copy link
Contributor

Choose a reason for hiding this comment

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

  • Should we rephrase the first sentence as suggested below.
  • In second sentence, does "When this size is definite" refer to the value being specified as length?
  • Do we need to explain what "cyclic percentage sizes" means?
  • Should it be "resolve against" or "resolve to"?
  • Please check suggested edits in last two sentences for technical accuracy
Suggested change
The property resolves percentages against the size of the content box. When this size is definite, the behavior is well-defined and consistent across layout modes. As these three layout modes treat cyclic percentage sizes differently, `gap` does 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.
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. Since the three layout modes (multi-column, flex, and grid) treat cyclic percentage sizes differently, `gap` does as well. In grid layout, cyclic percentage sizes resolve to zero for {{glossary("intrinsic size")}} calculations but use the element's content box when laying out contents. In flex layout, cyclic percentage sizes always resolve to zero.

Copy link
Member Author

Choose a reason for hiding this comment

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

Kept my original last sentence, but incorporated all your other suggestions.


The visible space between elements may differ from the value of the `gap` property, as the margins, padding, and distributed alignment may increase the visible separation between boxes beyond what is specified in `gap`.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

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`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
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`.
Early versions of the specification called this property `grid-gap`. 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.

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

{{cssinfo}}
Expand Down Expand Up @@ -186,5 +196,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)
dipikabh marked this conversation as resolved.
Show resolved Hide resolved
- [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