From 6e41389376a84693eaeed7f57d11e5dcc700db83 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 13 Jun 2024 20:52:05 -0700 Subject: [PATCH 1/5] CSS property update: gap --- files/en-us/web/css/gap/index.md | 33 +++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index eec8bfff62feeb8..17a8eacf78a9c29 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -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. {{EmbedInteractiveExample("pages/css/gap.html")}} @@ -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 `` or a ``. - ### 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 `` or a ``. + - {{CSSxRef("<length>")}} - : Is the width of the gutter separating the grid lines. - {{CSSxRef("<percentage>")}} - : Is the width of the gutter separating the grid lines, relative to the dimension of the element. +## 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. + +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 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. + +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. + +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`. + +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`. + ## Formal definition {{cssinfo}} @@ -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) +- [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 From a4c2c533ac57c101f20b0f53715177dcd4bd81bb Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 14 Jun 2024 16:58:32 -0700 Subject: [PATCH 2/5] typo --- files/en-us/web/css/gap/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index 17a8eacf78a9c29..5038bf5d8b15408 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -68,7 +68,7 @@ This property defines gaps between columns in CSS multi-column layout, flex item 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 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. +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. 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. From b117dc075c52b27554f56bafabb93aa64bd0dacd Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 18 Jun 2024 10:03:27 -0700 Subject: [PATCH 3/5] Update index.md --- files/en-us/web/css/gap/index.md | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index 5038bf5d8b15408..3d6c415ac5122e0 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -7,7 +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. 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. +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")}} @@ -55,26 +55,30 @@ gap: unset; ### 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 `` or a ``. +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 `` or a ``. - {{CSSxRef("<length>")}} - - : 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")}},. - {{CSSxRef("<percentage>")}} - - : 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. ## 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. +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). -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. +The generated gaps create empty space the width or height of the gap's size. + +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. 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. -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. +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. + +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. -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`. +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 will still accept `grid-gap` as an alias for `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`. ## Formal definition @@ -198,7 +202,7 @@ Early versions of the specification called this property `grid-gap`, and to main - {{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) +- [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 From def0b55c643bab1cbca5eec79397223b2095bcb1 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 20 Jun 2024 11:30:30 -0700 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/gap/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index 3d6c415ac5122e0..3269e796ff0ae7e 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -55,26 +55,26 @@ gap: unset; ### 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 `` or a ``. +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 each be specified as a `` or a ``. - {{CSSxRef("<length>")}} - - : Specifies the width of the gutter separating the columns, {{glossary("flex item","flex items")}}, flex lines, and {{glossary("grid lines")}},. + - : Specifies the width of the gutter separating columns, {{glossary("flex item","flex items")}}, flex lines, and {{glossary("grid lines")}}. - {{CSSxRef("<percentage>")}} - - : Specifies the width of the gutter separating the columns, flex items, flex lines, and grid lines relative to the dimension of the element. + - : Specifies the width of the gutter separating columns, flex items, flex lines, and grid lines relative to the dimension of the element. ## 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). +This property defines gaps between columns in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout), between flex items and flex lines in [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout), and between rows and columns in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). -The generated gaps create empty space the width or height of the gap's size. +The generated gaps create empty spaces that have the width or height of the gap's specified size. -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. +In grid layout, the first value defines the gutter between rows, and the second value defines the gutter between columns. In both grid and flex layouts, if only one value is included, that value is used for both dimensions. -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. +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. For 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. For columns (`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. -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. +In multi-column containers, the first value defines the gap between columns. A dividing line can be added to the otherwise "empty space" by using the {{cssxref("column-rule-style")}} property or {{cssxref("column-rule")}} shorthand. -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. +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 element's content box when laying out the contents. In flex layout, cyclic percentage sizes always resolve against zero. 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`. From ea9a035acdbe5facf848c68dbc1db201dac4d554 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 20 Jun 2024 11:43:00 -0700 Subject: [PATCH 5/5] Update files/en-us/web/css/gap/index.md --- files/en-us/web/css/gap/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/gap/index.md b/files/en-us/web/css/gap/index.md index 3269e796ff0ae7e..4c0856094d0ca0f 100644 --- a/files/en-us/web/css/gap/index.md +++ b/files/en-us/web/css/gap/index.md @@ -74,7 +74,7 @@ With flex containers, whether the first value is the gap between flex items or b In multi-column containers, the first value defines the gap between columns. A dividing line can be added to the otherwise "empty space" by using the {{cssxref("column-rule-style")}} property or {{cssxref("column-rule")}} shorthand. -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 element's content box when laying out the 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. 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 element's content box when laying out the contents. 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`.