From 70a2f1d37a7a6dd266ef35a22b10b9643f626026 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:15:52 -0700 Subject: [PATCH 1/9] Minor: Capitalization: CSS directory --- files/en-us/web/css/align-content/index.md | 8 +-- files/en-us/web/css/align-items/index.md | 2 +- files/en-us/web/css/align-self/index.md | 8 +-- files/en-us/web/css/box-flex-group/index.md | 2 +- files/en-us/web/css/column-gap/index.md | 2 +- .../box_alignment_in_flexbox/index.md | 14 ++--- .../box_alignment_in_grid_layout/index.md | 8 +-- .../en-us/web/css/css_box_alignment/index.md | 22 +++---- .../using_feature_queries/index.md | 2 +- files/en-us/web/css/css_display/index.md | 4 +- .../index.md | 2 +- files/en-us/web/css/css_functions/index.md | 2 +- .../auto-placement_in_grid_layout/index.md | 4 +- .../basic_concepts_of_grid_layout/index.md | 10 +-- .../box_alignment_in_grid_layout/index.md | 8 +-- .../grid_layout_and_accessibility/index.md | 18 +++--- .../index.md | 62 +++++++++---------- .../index.md | 10 +-- .../index.md | 8 +-- .../grid_template_areas/index.md | 6 +- .../index.md | 4 +- files/en-us/web/css/css_grid_layout/index.md | 10 +-- .../css_grid_layout/masonry_layout/index.md | 2 +- .../index.md | 10 +-- .../index.md | 20 +++--- .../web/css/css_grid_layout/subgrid/index.md | 10 +-- .../index.md | 4 +- files/en-us/web/css/css_types/index.md | 4 +- files/en-us/web/css/display-inside/index.md | 4 +- files/en-us/web/css/display/index.md | 8 +-- .../multi-keyword_syntax_of_display/index.md | 2 +- .../web/css/fit-content_function/index.md | 6 +- files/en-us/web/css/flex-basis/index.md | 6 +- files/en-us/web/css/flex-direction/index.md | 4 +- files/en-us/web/css/flex-flow/index.md | 4 +- files/en-us/web/css/flex-shrink/index.md | 4 +- files/en-us/web/css/flex-wrap/index.md | 4 +- files/en-us/web/css/flex_value/index.md | 4 +- .../en-us/web/css/grid-auto-columns/index.md | 2 +- files/en-us/web/css/grid-auto-flow/index.md | 2 +- files/en-us/web/css/grid-auto-rows/index.md | 2 +- files/en-us/web/css/grid-column-end/index.md | 2 +- .../en-us/web/css/grid-column-start/index.md | 2 +- files/en-us/web/css/grid-column/index.md | 13 +++- files/en-us/web/css/grid-row-end/index.md | 2 +- files/en-us/web/css/grid-row-start/index.md | 2 +- files/en-us/web/css/grid-row/index.md | 2 +- .../web/css/grid-template-columns/index.md | 2 +- .../en-us/web/css/grid-template-rows/index.md | 2 +- files/en-us/web/css/grid-template/index.md | 2 +- files/en-us/web/css/grid/index.md | 2 +- files/en-us/web/css/index.md | 2 +- files/en-us/web/css/justify-content/index.md | 8 +-- files/en-us/web/css/justify-items/index.md | 8 +-- files/en-us/web/css/justify-self/index.md | 8 +-- .../web/css/layout_cookbook/card/index.md | 4 +- .../center_an_element/index.md | 2 +- .../layout_cookbook/column_layouts/index.md | 8 +-- .../css/layout_cookbook/grid_wrapper/index.md | 4 +- files/en-us/web/css/layout_cookbook/index.md | 8 +-- .../list_group_with_badges/index.md | 2 +- .../layout_cookbook/sticky_footers/index.md | 4 +- .../en-us/web/css/masonry-auto-flow/index.md | 2 +- files/en-us/web/css/minmax/index.md | 2 +- files/en-us/web/css/order/index.md | 6 +- files/en-us/web/css/place-content/index.md | 6 +- files/en-us/web/css/place-items/index.md | 6 +- files/en-us/web/css/place-self/index.md | 6 +- files/en-us/web/css/repeat/index.md | 4 +- files/en-us/web/css/vertical-align/index.md | 2 +- 70 files changed, 224 insertions(+), 217 deletions(-) diff --git a/files/en-us/web/css/align-content/index.md b/files/en-us/web/css/align-content/index.md index 77eee717888ba9c..c2d7ac8adcc24e8 100644 --- a/files/en-us/web/css/align-content/index.md +++ b/files/en-us/web/css/align-content/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.align-content The [CSS](/en-US/docs/Web/CSS) **`align-content`** property sets the distribution of space between and around content items along a [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout)'s [cross axis](/en-US/docs/Glossary/Cross_Axis), or a [grid](/en-US/docs/Web/CSS/CSS_grid_layout) or [block-level](/en-US/docs/Glossary/Block-level_content) element's block axis. -The interactive example below uses Grid Layout to demonstrate some of the values of this property. +The interactive example below uses grid layout to demonstrate some of the values of this property. {{EmbedInteractiveExample("pages/css/align-content.html")}} @@ -243,9 +243,9 @@ In [block layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_a ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) - [Block-level_content](/en-US/docs/Glossary/Block-level_content) diff --git a/files/en-us/web/css/align-items/index.md b/files/en-us/web/css/align-items/index.md index 38496656f5b46cd..95feb629504833f 100644 --- a/files/en-us/web/css/align-items/index.md +++ b/files/en-us/web/css/align-items/index.md @@ -283,7 +283,7 @@ display.addEventListener("change", (evt) => { - {{cssxref("place-items")}} shorthand - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- [Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [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 diff --git a/files/en-us/web/css/align-self/index.md b/files/en-us/web/css/align-self/index.md index 576f89aa17f71cc..a830d30e2264b45 100644 --- a/files/en-us/web/css/align-self/index.md +++ b/files/en-us/web/css/align-self/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.align-self {{CSSRef}} -The **`align-self`** [CSS](/en-US/docs/Web/CSS) property overrides a grid or flex item's {{cssxref("align-items")}} value. In Grid, it aligns the item inside the {{glossary("Grid Areas", "grid area")}}. In Flexbox, it aligns the item on the {{glossary("cross axis")}}. +The **`align-self`** [CSS](/en-US/docs/Web/CSS) property overrides a grid or flex item's {{cssxref("align-items")}} value. In grid, it aligns the item inside the {{glossary("Grid Areas", "grid area")}}. In flexbox, it aligns the item on the {{glossary("cross axis")}}. {{EmbedInteractiveExample("pages/css/align-self.html")}} @@ -138,8 +138,8 @@ div:nth-child(3) { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{cssxref("align-items")}} property diff --git a/files/en-us/web/css/box-flex-group/index.md b/files/en-us/web/css/box-flex-group/index.md index b859ef4da14b84e..d0e698e0a2b3b1a 100644 --- a/files/en-us/web/css/box-flex-group/index.md +++ b/files/en-us/web/css/box-flex-group/index.md @@ -48,7 +48,7 @@ box-flex-group = ### Simple usage example -In the original Flexbox spec, `box-flex-group` could be used to assign flex children to different groups to distribute flexible space between: +In the original flexbox spec, `box-flex-group` could be used to assign flex children to different groups to distribute flexible space between: ```css article:nth-child(1) { diff --git a/files/en-us/web/css/column-gap/index.md b/files/en-us/web/css/column-gap/index.md index b1883e78fb39d63..fe83e43818b84aa 100644 --- a/files/en-us/web/css/column-gap/index.md +++ b/files/en-us/web/css/column-gap/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.column-gap The **`column-gap`** [CSS](/en-US/docs/Web/CSS) property sets the size of the gap ({{glossary("Gutters","gutter")}}) between an element's columns. -Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in Multi-column, Flexible Box, and Grid layouts. +Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in Multi-column, Flexible Box, and grid layouts. Early versions of the specification called this property `grid-column-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-column-gap` as an alias for `column-gap`. diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md index 183d5bbf4c2fac3..b51654e3cf3e066 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods. +The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox. As this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods. ## Basic example @@ -18,7 +18,7 @@ In this example, three flex items are aligned on the main axis using {{cssxref(" Flexbox respects the writing mode of the document, therefore if you are working in English and set {{cssxref("justify-content")}} to `flex-end` this will align the items to the end of the flex container. If you are working with {{cssxref("flex-direction")}} set to `row`, this alignment will be in the inline direction. -However, in Flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in Flexbox like so: +However, in flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in flexbox like so: - The main axis = direction set by `flex-direction` = alignment via `justify-content` - The cross axis = runs across the main axis = alignment via `align-content`, `align-self`/`align-items` @@ -33,19 +33,19 @@ However, in Flexbox you can change the main axis by setting `flex-direction` to - {{cssxref("align-items")}} - {{cssxref("align-content")}} -### There is no justify-self in Flexbox +### There is no justify-self in flexbox On the main axis, Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The `justify-content` property controls how that leftover space is used. Set `justify-content: flex-end` and the extra space is placed before the items, `justify-content: space-around` and it is placed either side of the item in that dimension, etc. -This means that a `justify-self` property does not make sense in Flexbox as we are always dealing with moving the entire group of items around. +This means that a `justify-self` property does not make sense in flexbox as we are always dealing with moving the entire group of items around. On the cross axis `align-self` makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end. ## Alignment and auto margins -There is a specific use case in Flexbox where we might think that a `justify-self` property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case, we can use an `auto` margin. A margin set to `auto` will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to `auto`, both sides of our block try to take up all of the available space and so push the box into the center. +There is a specific use case in flexbox where we might think that a `justify-self` property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case, we can use an `auto` margin. A margin set to `auto` will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to `auto`, both sides of our block try to take up all of the available space and so push the box into the center. -By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space. +By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space. {{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}} @@ -89,5 +89,5 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l ## External Resources -- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [CSS grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) - [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md index 612490be56fc3be..7309dd5a45f2182 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md @@ -8,7 +8,7 @@ page-type: guide The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). -As this page aims to detail things which are specific to CSS Grid Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods. +As this page aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods. ## Basic example @@ -41,7 +41,7 @@ To align things on the block axis you use the properties that start with `align- - {{cssxref("align-items")}} - {{cssxref("place-items")}} -These properties deal with aligning the item inside the grid area it is placed into. The properties `align-items` and `justify-items` are applied to the grid container and set the `align-self` and `justify-self` properties as a group. This means that you can set alignment for all of your grid Items at once, then override any items that need a different alignment by applying the `align-self` or `justify-self` property to the rules for the individual grid Items. +These properties deal with aligning the item inside the grid area it is placed into. The properties `align-items` and `justify-items` are applied to the grid container and set the `align-self` and `justify-self` properties as a group. This means that you can set alignment for all of your grid items at once, then override any items that need a different alignment by applying the `align-self` or `justify-self` property to the rules for the individual grid items. The initial value for `align-self` and `justify-self` is `stretch` so the item will stretch over the entire grid area. The exception to this rule is where the item has an intrinsic {{glossary("aspect ratio")}}, for example an image. In this case the item will be aligned to `start` in both dimensions in order that the image is not distorted. @@ -59,7 +59,7 @@ These properties deal with aligning the tracks of the grid when there is extra s - {{cssxref("column-gap")}} - {{cssxref("gap")}} -The Grid specification originally contained the definition for the properties {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}} and {{cssxref("gap", "grid-gap")}}. These have since been moved into the Box Alignment specification and renamed to {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, and {{cssxref("gap")}}. This allows them to be used for other layout methods where a gap between items makes sense. +The grid specification originally contained the definition for the properties {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}} and {{cssxref("gap", "grid-gap")}}. These have since been moved into the Box Alignment specification and renamed to {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, and {{cssxref("gap")}}. This allows them to be used for other layout methods where a gap between items makes sense. The updated properties have not yet been implemented in all browsers. Therefore, to use the gap properties in grid layout, you should use the `grid-row-gap`, `grid-column-gap` and `grid-gap` versions to ensure full compatibility. You could double up the properties and use both as you would for vendor prefixes. @@ -91,5 +91,5 @@ The updated properties have not yet been implemented in all browsers. Therefore, ## External Resources -- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [CSS grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) - [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md index cc4a3762c950a19..8ec05901e1ba7f3 100644 --- a/files/en-us/web/css/css_box_alignment/index.md +++ b/files/en-us/web/css/css_box_alignment/index.md @@ -14,7 +14,7 @@ The **CSS box alignment** module specifies CSS features that relate to the align CSS traditionally had very limited alignment capabilities. We were able to align text using {{cssxref("text-align")}}, center blocks using auto {{cssxref("margin")}}s, and in table or inline-block layouts using the {{cssxref("vertical-align")}} property. Alignment of text is now covered by the [Inline Layout](https://www.w3.org/TR/css-inline-3/) and [CSS Text](https://www.w3.org/TR/css-text-3/) modules, and for the first time in Box Alignment we have full horizontal and vertical alignment capabilities. -If you initially learned [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) then you may consider these properties to be part of the Flexbox specification, and some of the properties are indeed listed in Level 1 of Flexbox. However the specification notes that the Box Alignment specification should be referred to as it may add additional capabilities over what is currently in Flexbox. +If you initially learned [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) then you may consider these properties to be part of the flexbox specification, and some of the properties are indeed listed in Level 1 of flexbox. However the specification notes that the Box Alignment specification should be referred to as it may add additional capabilities over what is currently in flexbox. ## Basic examples @@ -22,7 +22,7 @@ The following examples demonstrate how some of the Box Alignment Properties are ### CSS grid layout alignment example -In this example using Grid Layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using {{cssxref("justify-content")}}. On the block (cross) axis the alignment of the items inside their grid areas is controlled with {{cssxref("align-items")}}. The first item overrides the `align-items` value set on the group by setting {{cssxref("align-self")}} to `center`. +In this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using {{cssxref("justify-content")}}. On the block (cross) axis the alignment of the items inside their grid areas is controlled with {{cssxref("align-items")}}. The first item overrides the `align-items` value set on the group by setting {{cssxref("align-self")}} to `center`. {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 700)}} @@ -93,14 +93,14 @@ The following values are defined for positional alignment, and can be used as va - `end` - `self-start` - `self-end` -- `flex-start` for Flexbox only -- `flex-end` for Flexbox only +- `flex-start` for flexbox only +- `flex-end` for flexbox only - `left` - `right` Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values are logical values and relate to the writing mode of the content. -For example, when working in CSS Grid Layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left. If you were using Arabic, a right to left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page. +For example, when working in CSS grid layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left. If you were using Arabic, a right to left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page. Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode. @@ -165,8 +165,8 @@ Be aware that other things may increase the visual gap displayed, for example us As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it: -- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) -- [Box alignment in CSS Grid Layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) +- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) - [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout) - [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables) @@ -197,11 +197,11 @@ As the CSS box alignment properties are implemented differently depending on the ## Guides -- CSS Flexbox guide: _[Basic concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- CSS flexbox guide: _[Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS flexbox guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ ## External Resources -- [CSS Grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) +- [CSS grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) - [Thoughts on partial implementations of Box alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 69b8e1eeecdc83a..043cf837c82e4ec 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -84,7 +84,7 @@ You may need to test support for more than one property in your feature query. T } ``` -For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule that tests browser support for both of these features. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser. +For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS grid, you could create a rule that tests browser support for both of these features. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser. {{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}} diff --git a/files/en-us/web/css/css_display/index.md b/files/en-us/web/css/css_display/index.md index 8ab5eaaf1b793d7..b66435c872b9c5c 100644 --- a/files/en-us/web/css/css_display/index.md +++ b/files/en-us/web/css/css_display/index.md @@ -57,8 +57,8 @@ The **CSS display** module defines how the CSS formatting box tree is generated - [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) - [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- [CSS Grid Layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) -- [CSS Grid Layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) +- [CSS grid layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) ## Specifications diff --git a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md index 2859bbfa03aa6bf..e79d67f00ae8e9a 100644 --- a/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md +++ b/files/en-us/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md @@ -87,7 +87,7 @@ The flex items however are participating in a flex formatting context, because t Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of _flow_ however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type. -This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (`display: flex`) and Grid Layout (`display: grid`) is still participating in block and inline layout, due to the outer display type of those methods being `block`. +This concept of the outer and inner display type is important as this tells us that a container using a layout method such as flexbox (`display: flex`) and grid layout (`display: grid`) is still participating in block and inline layout, due to the outer display type of those methods being `block`. ### Changing the Formatting Context an element participates in diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index 3239099eaa215e0..e076494cd1207c6 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -285,7 +285,7 @@ The following functions are used as a value of properties to reference a value d ## Grid functions -The following functions are used to define a [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout). +The following functions are used to define a [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout). - {{CSSxRef("fit-content", "fit-content()")}} - : Clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`. diff --git a/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md index 9e259c4c1ec1579..a703ed4aeba0d40 100644 --- a/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/auto-placement_in_grid_layout/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in action in the simplest of ways by creating a grid on a set of items. +In addition to the ability to place items accurately onto a created grid, the CSS grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in action in the simplest of ways by creating a grid on a set of items. ## Default placement @@ -390,7 +390,7 @@ So far, other than items we have specifically placed, grid is always progressing To do this, add the property {{cssxref("grid-auto-flow")}} with a value of `dense` to the container. This is the same property you use to change the flow order to `column`, so if you were working in columns you would add both values `grid-auto-flow: column dense`. -Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in the [Grid layout and accessibility guide](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility), but you should take care when creating this disconnect between the visual order and display order. +Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of grid layout in the [Grid layout and accessibility guide](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility), but you should take care when creating this disconnect between the visual order and display order. ```css hidden * { diff --git a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 456276d74bf3038..57c2da13e1b0830 100644 --- a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS Grid Layout and the new terminology that is part of the CSS Grid Layout Level 1 specification. The features shown in this overview will then be explained in greater detail in the rest of this guide. +[CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS grid layout and the new terminology that is part of the CSS grid layout Level 1 specification. The features shown in this overview will then be explained in greater detail in the rest of this guide. ## What is a grid? @@ -22,7 +22,7 @@ You can place items into a precise location on the grid using line numbers, name ### Creation of additional tracks to hold content -You can define an explicit grid with grid layout. The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding "as many columns that will fit into a container" are included. +You can define an explicit grid with grid layout. The grid layout specification is flexible enough to add additional rows and columns when needed. Features such as adding "as many columns that will fit into a container" are included. ### Alignment control @@ -82,9 +82,9 @@ I make the `.wrapper` a grid container. All the direct children are now grid items. In a web browser, you won't see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work with the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), available as part of Firefox's Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value `grid`. Click this and then the grid on this element will be overlaid in the browser window. -![Using the Grid Highlighter in DevTools to view a grid](1-grid-inspector.png) +![Using the grid highlighter in DevTools to view a grid](1-grid-inspector.png) -As you learn and then work with the CSS Grid Layout, this tool will give you a better idea of what is happening with your grids visually. +As you learn and then work with the CSS grid layout, this tool will give you a better idea of what is happening with your grids visually. If we want to start making this more grid-like we need to add column tracks. @@ -782,4 +782,4 @@ We can control the order in which items stack up by using the `z-index` property ## Next steps -In this article, we took a very quick look at the possibilities of grid layouts. Explore and play with the code examples, and then move on to [the next part of this guide](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods), where we will really start to dig into the details of CSS Grid Layout. +In this article, we took a very quick look at the possibilities of grid layouts. Explore and play with the code examples, and then move on to [the next part of this guide](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods), where we will really start to dig into the details of CSS grid layout. diff --git a/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md index e616f8091dfaf44..edf190a839f2cc8 100644 --- a/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/box_alignment_in_grid_layout/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -CSS Grid Layout implements the specification [Box Alignment Level 3](https://drafts.csswg.org/css-align/) which is the same standard [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). While the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the CSS Grid Layout method has been widely adopted. +CSS grid layout implements the specification [Box Alignment Level 3](https://drafts.csswg.org/css-align/) which is the same standard [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). While the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the CSS grid layout method has been widely adopted. This guide presents demonstrations of how box alignment in grid layout works. You will see many similarities in how these properties and values work in flexbox. Due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should watch out for. So we will start by looking at the two axes that we deal with when aligning things in a grid. @@ -654,14 +654,14 @@ In this next example, I have given item 1 a left margin of `auto`. You can see h {{ EmbedLiveSample('Alignment_and_auto_margins', '500', '550') }} -You can see how the item is aligned by using the [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html): +You can see how the item is aligned by using the [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html): -![Image showing auto-margins using the Grid Highlighter.](7_auto_margins.png) +![Image showing auto-margins using the grid highlighter.](7_auto_margins.png) ## Alignment and Writing Modes In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions. -CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of `justify-content: start` would be for grid tracks to start on the right-hand side of the grid. +CSS grid layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of `justify-content: start` would be for grid tracks to start on the right-hand side of the grid. Setting auto margins, using `margin-right` or `margin-left` however, or absolutely positioning items using the `top`, `right`, `bottom` and `left` offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design. diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md index c94f3e46b1678bc..0f13888c67cd515 100644 --- a/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_layout_and_accessibility/index.md @@ -6,17 +6,17 @@ page-type: guide {{CSSRef}} -Those of us who have been doing web development for more years than we care to remember might consider that CSS Grid is a little bit like using "tables for layout". Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the "CSS Positioning" that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the markup, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example. +Those of us who have been doing web development for more years than we care to remember might consider that CSS grid is a little bit like using "tables for layout". Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the "CSS Positioning" that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the markup, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example. In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the [CSS Zen Garden](https://www.csszengarden.com/) showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS. [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) does not have the same issues that tables did, our grid structure is defined in CSS rather than in the markup. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from markup, however is it possible to go too far with this idea? Is it possible that we could _create_ an accessibility issue through our use of grids? -## Re-ordering content in CSS Grid Layout +## Re-ordering content in CSS grid layout We've already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use `grid-auto-flow: dense` which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source. -The [specification](https://drafts.csswg.org/css-grid/#order-accessibility) includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout. +The [specification](https://drafts.csswg.org/css-grid/#order-accessibility) includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using grid layout. > Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. [tabindex](/en-US/docs/Web/HTML/Global_attributes/tabindex) HTML5). @@ -86,24 +86,24 @@ The specification says that in this scenario, if box 1 really makes sense logica From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages? - Start with a structured and accessible document - - : A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for _your smallest screen devices too_. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source. + - : A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS grid layout specification, this is quite often going to give you a good structure for _your smallest screen devices too_. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source. - Create a responsive, and responsible grid - : With a solid document you can begin to add your layout, it is likely you will be using [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to _tab around the document_. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout. - Returning to the source - - : If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order. + - : If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS grid layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order. ## Grid and the danger of markup flattening -Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to _flatten_ markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, _that_ `ul` becomes a grid item – the child {{HTMLElement("li")}} elements do not. +Another issue to be aware of in CSS grid layout and to a lesser extent in CSS flexbox, is the temptation to _flatten_ markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, _that_ `ul` becomes a grid item – the child {{HTMLElement("li")}} elements do not. The [subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) value of `grid-template-columns` and `grid-template-rows` will solve this problem once widely implemented. It will allow the grid to be inherited by grid items and passed down the tree. -Given that interoperable support for subgrid is limited, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to `display: grid`. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so! +Given that interoperable support for subgrid is limited, there is a definite temptation when developing a site using CSS grid layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to `display: grid`. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so! ## Further reading -There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property. +There is not a lot of existing material regarding accessibility and CSS grid layout. Many of the issues are similar to those raised regarding CSS flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property. The concept of visual display following document source order is detailed in the _WCAG Techniques for Success Criteria – [Technique C27](https://www.w3.org/TR/WCAG20-TECHS/C27.html)_. -As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading _[Flexbox & the Keyboard Navigation Disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)_ from Léonie Watson. Also [the video of Léonie's presentation from ffconf](https://www.youtube.com/watch?v=spxT2CmHoPk) is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding [tab order in various browsers](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) – although this was prior to grid support being fully implemented in Firefox. +As a way to start thinking about these issues, as you use CSS grid layout I would suggest reading _[Flexbox & the Keyboard Navigation Disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)_ from Léonie Watson. Also [the video of Léonie's presentation from ffconf](https://www.youtube.com/watch?v=spxT2CmHoPk) is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding [tab order in various browsers](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) – although this was prior to grid support being fully implemented in Firefox. diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md index 72ebe2a77e5e387..487b0cfbf8182e4 100644 --- a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md @@ -1,28 +1,28 @@ --- -title: CSS Grid Layout and progressive enhancement +title: CSS grid layout and progressive enhancement slug: Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement page-type: guide --- {{CSSRef}} -In Spring of 2017, we saw for the first time a major specification like Grid being shipped into browsers almost simultaneously, and we now have CSS Grid Layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having Grid Layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support. +In Spring of 2017, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have CSS grid layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having grid layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support. ## The supporting browsers -CSS Grid Layout is unprefixed in all modern browsers. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production. +CSS grid layout is unprefixed in all modern browsers. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some grid layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production. ## Is it safe to use CSS grids for my layout? -Yes. As with any front-end technology choice, the decision to use CSS Grid Layout will come down to the browsers your site visitors are typically using. +Yes. As with any front-end technology choice, the decision to use CSS grid layout will come down to the browsers your site visitors are typically using. -## Starting to use Grid in production +## Starting to use grid in production It is worth noting that you do not have to use grid in an _all or nothing_ way. Start by enhancing elements in your design with grid, that could otherwise display using an older method. Overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods. ### Floats -[Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) used to be used to create multiple column layouts. If you're supporting an old codebase with floated layouts, there will be no conflict. Grid items ignore the float property; the fact is that _a grid item takes precedence._ In the example below, I have a simple media object. If the {{cssxref("float")}} is not removed from legacy CSS, as the container is a grid container, it's OK. We can use the alignment properties that are implemented in CSS Grids. +[Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) used to be used to create multiple column layouts. If you're supporting an old codebase with floated layouts, there will be no conflict. Grid items ignore the float property; the fact is that _a grid item takes precedence._ In the example below, I have a simple media object. If the {{cssxref("float")}} is not removed from legacy CSS, as the container is a grid container, it's OK. We can use the alignment properties that are implemented in CSS grids. The {{cssxref("float")}} no longer applies, and I can use the CSS Box Alignment property {{cssxref("align-self")}} to align my content to the end of the container: @@ -128,27 +128,27 @@ In this next example, I have a set of floated cards. I have given the cards a {{ @@ -237,28 +237,28 @@ I use an `@supports` rule to check for support of `display: grid`. I then do my @@ -326,28 +326,28 @@ Once again I can use feature queries to overwrite a layout that uses `display: i @@ -359,11 +359,11 @@ Once again it is the width on the item we need to address, and then any other pr ## How does the specification define these overrides? -The CSS Grid Layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. The key sections of the specification are: +The CSS grid layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. The key sections of the specification are: -- [Establishing Grid Containers](https://drafts.csswg.org/css-grid/#grid-containers) -- [Grid Items](https://drafts.csswg.org/css-grid/#grid-items) -- [Grid Item Display](https://drafts.csswg.org/css-grid/#grid-item-display) +- [Establishing grid containers](https://drafts.csswg.org/css-grid/#grid-containers) +- [Grid items](https://drafts.csswg.org/css-grid/#grid-items) +- [Grid item display](https://drafts.csswg.org/css-grid/#grid-item-display) As this behavior is detailed in the specification, you are safe to rely on using these overrides in your support for older browsers. Nothing described here should be seen as a "hack". Rather, we are taking advantage of the fact that the grid specification details the interaction between different layout methods. @@ -388,4 +388,4 @@ You can also use multiple column layout as your legacy browser plan, as the `col ## Further reading - For an excellent explanation of feature queries, and how to use them well, see [Using Feature Queries in CSS (2016)](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/). -- [CSS Grid and the New Autoprefixer (2018)](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/) +- [CSS grid and the New Autoprefixer (2018)](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/) diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md index 4cbf45aab14232b..d5cc9586c670c3d 100644 --- a/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md @@ -14,9 +14,9 @@ Starting your exploration of grid with numbered lines is the most logical place As a very simple example we can take a grid with 3 column tracks and 3 row tracks. This gives us 4 lines in each dimension. -Inside our grid container, we have four child elements. If we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. If you use the [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) you can see how the grid has defined columns and rows. +Inside our grid container, we have four child elements. If we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. If you use the [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) you can see how the grid has defined columns and rows. -![Our Grid highlighted in DevTools](highlighted_grid.png) +![Our grid highlighted in DevTools](highlighted_grid.png) ```css hidden * { @@ -72,7 +72,7 @@ We can use line-based placement to control where these items sit on the grid. We As you position some items, other items on the grid will continue to be laid out using the auto-placement rules. We will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid. -Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about Grid Layout is the ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left. +Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about grid layout is the ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left. ```css hidden * { @@ -461,7 +461,7 @@ Being able to address the start and end lines of the grid is useful as you can t ## Gutters or Alleys -The CSS Grid Specification includes the ability to add gutters between column and row tracks with the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties. These specify a gap that acts much like the {{cssxref("column-gap")}} property in multi-column layout. +The CSS grid specification includes the ability to add gutters between column and row tracks with the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties. These specify a gap that acts much like the {{cssxref("column-gap")}} property in multi-column layout. > **Note:** When grid first shipped in browsers the {{cssxref("column-gap")}}, {{cssxref("row-gap")}} and {{cssxref("gap")}} properties were prefixed with the `grid-` prefix as `grid-column-gap`, `grid-row-gap` and `grid-gap` respectively. > @@ -623,4 +623,4 @@ In the second example, we specify the end row line we want the item to finish at To become familiar with line based positioning in grid try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules. This may result in the layout you want, but if something is appearing somewhere unexpected, check that you have set a position for it. -Also, remember that items on the grid can overlap each other when you place them explicitly like this. That can create some nice effects, however you can also end up with things overlapping incorrectly if you specify the wrong start or end line. The [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) can be very useful as you learn, especially if your grid is quite complicated. +Also, remember that items on the grid can overlap each other when you place them explicitly like this. That can create some nice effects, however you can also end up with things overlapping incorrectly if you specify the wrong start or end line. The [Firefox grid highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) can be very useful as you learn, especially if your grid is quite complicated. diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md index 77b773f7d625adc..2f676d9f9164d2a 100644 --- a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md @@ -135,9 +135,9 @@ I'm using the same grid definitions as above, however this time I am going to pl We don't need to define where our areas are with `grid-template-areas` as our named lines have created an area for us. -## Implicit Grid lines from named areas +## Implicit grid lines from named areas -We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works. +We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to grid template Areas, we can use the lines created by our areas to see how this works. In this example I have added an extra div with a class of `overlay`. We have named areas created using the `grid-area` property, then a layout created in `grid-template-areas`. The area names are: @@ -295,9 +295,9 @@ You can also use the `span` keyword here. My next item will be placed from the 7 {{ EmbedLiveSample('Twelve-column_grid_using_repeat', '500', '330') }} -If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines. +If you take a look at this layout in the Firefox grid highlighter you can see how the column lines are shown, and how our items are placed against these lines. -![The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.](5_named_lines1.png) +![The 12 column grid with items placed. The grid highlighter shows the position of the lines.](5_named_lines1.png) ### Defining named lines with a track list diff --git a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md index 2809d67321bca6e..5e81f7b242e10bb 100644 --- a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.md @@ -20,7 +20,7 @@ You have already encountered the {{cssxref("grid-area")}} property. This is the What we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area. -![The Grid Area defined by lines](4_area.png) +![The grid area defined by lines](4_area.png) We can also define an area by giving it a name and then specify the location of that area in the value of the {{cssxref("grid-template-areas")}} property. You can choose what you would like to name your area. For example, if I wish to create the layout shown below I can identify four main areas. @@ -428,7 +428,7 @@ These can quickly become difficult to read for other developers, or even your fu Before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, they also act to **reset things** to their initial values that you do not, or cannot set in the shorthand. Therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere. -The two shorthands for the grid container are the Explicit Grid Shorthand `grid-template` and the Grid Definition Shorthand `grid`. +The two shorthands for the grid container are the Explicit grid shorthand `grid-template` and the grid definition shorthand `grid`. ### `grid-template` @@ -438,7 +438,7 @@ The {{cssxref("grid-template")}} property sets the following properties: - {{cssxref("grid-template-columns")}} - {{cssxref("grid-template-areas")}} -The property is referred to as the Explicit Grid Shorthand because it is setting those things that you control when you define an explicit grid, and not those which impact any implicit row or column tracks that might be created. +The property is referred to as the Explicit grid shorthand because it is setting those things that you control when you define an explicit grid, and not those which impact any implicit row or column tracks that might be created. The following code creates a layout using {{cssxref("grid-template")}} that is the same as the layout created earlier in this guide. diff --git a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md index e8c883a11c21bcb..1c5ef50506f18a8 100644 --- a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md +++ b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md @@ -71,7 +71,7 @@ This is a very simple example of the problem with physical values and properties ### Logical properties and values -Logical properties and values do not make an assumption about text direction. Which is why in Grid Layout we use the keyword `start` when aligning something to the start of the container. For me, working in English, `start` may well be on the left, however it doesn't have to be, and the word `start` infers no physical location. +Logical properties and values do not make an assumption about text direction. Which is why in grid layout we use the keyword `start` when aligning something to the start of the container. For me, working in English, `start` may well be on the left, however it doesn't have to be, and the word `start` infers no physical location. ## Block and Inline @@ -486,7 +486,7 @@ In addition to displaying documents, using the correct writing mode for the lang ## Physical values and grid layout -We encounter physical properties frequently when building websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with Grid that force you to use physical properties and values. In the guide to [Box alignment and grids](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), I demonstrated how auto margins work in a grid area. Using an auto margin to push one item away from the others is a common flexbox trick too, however this also ties the layout to the physical space. +We encounter physical properties frequently when building websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with grid that force you to use physical properties and values. In the guide to [Box alignment and grids](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout), I demonstrated how auto margins work in a grid area. Using an auto margin to push one item away from the others is a common flexbox trick too, however this also ties the layout to the physical space. If you use absolute positioning within a grid area, then you will again be using physical offsets to push the item around inside the grid area. The key thing is to be aware of, is the tension between physical and logical properties and values. For example, be aware that you may need to make changes to your CSS to cope with a switch from `ltr` to `rtl`. diff --git a/files/en-us/web/css/css_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/index.md index 2c152d258152804..972bb750bd951a9 100644 --- a/files/en-us/web/css/css_grid_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/index.md @@ -151,8 +151,8 @@ The example below shows a three-column track grid with new rows created at a min - [Grid column](/en-US/docs/Glossary/Grid_Column) - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module - [CSS display](/en-US/docs/Web/CSS/CSS_display) module -- [Grid by Example](https://gridbyexample.com/) - A collection of usage examples and video tutorials -- [CSS Grid Reference - Codrops](https://tympanus.net/codrops/css_reference/grid/) -- [CSS Grid Inspector - Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) -- [CSS Grid Playground](https://mozilladevelopers.github.io/playground/css-grid/) -- [CSS Grid Garden](https://cssgridgarden.com) - A game for learning CSS grid +- [Grid by example](https://gridbyexample.com/) +- [CSS grid reference](https://tympanus.net/codrops/css_reference/grid/) via Codrops +- [CSS grid inspector - Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) +- [CSS grid playground](https://mozilladevelopers.github.io/playground/css-grid/) +- [CSS grid garden](https://cssgridgarden.com) - A game for learning CSS grid diff --git a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md index 60b473f24ec983f..e25920330de175b 100644 --- a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md @@ -66,4 +66,4 @@ In browsers [that do not support masonry](#browser_compatibility), regular grid ## See also -- [Native CSS Masonry Layout In CSS Grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/) +- [Native CSS Masonry Layout In CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/) diff --git a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md index 1fb6963efe7aba5..ca5c399242cebb8 100644 --- a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md +++ b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -To round off this set of guides to CSS Grid Layout, we're going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using [grid-template-areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas), a typical 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement. +To round off this set of guides to CSS grid layout, we're going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using [grid-template-areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas), a typical 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement. ## A responsive layout with 1 to 3 fluid columns using `grid-template-areas` @@ -158,7 +158,7 @@ This is a simple example but demonstrates how we can use a grid layout to rearra ## A flexible 12-column layout -If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, let's create a 12-column flexible grid that has 12 `1fr`-unit column tracks, they all have a start line named `col-start`. This means that we will have twelve grid lines named `col-start`. +If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS grid layout. As a simple example, let's create a 12-column flexible grid that has 12 `1fr`-unit column tracks, they all have a start line named `col-start`. This means that we will have twelve grid lines named `col-start`. ```css hidden .wrapper { @@ -224,11 +224,11 @@ We can then place these on the grid using the named lines, and also the span key As described in the [guide to named lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines), we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all. -Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the `span` keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the [Firefox Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html). It clearly demonstrates how our items are placed. +Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the `span` keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the [Firefox grid inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html). It clearly demonstrates how our items are placed. ![Showing the items placed on the grid with grid tracks highlighted.](11-grid-inspector-12col.png) -There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this _strict_ column and row placement we can also easily leave white space in our layout. We also don't need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item. +There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS grid layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this _strict_ column and row placement we can also easily leave white space in our layout. We also don't need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item. ## Building a layout using the 12-column system @@ -370,7 +370,7 @@ Something to note as we create this layout is that we haven't needed to explicit ## A product listing with auto-placement -Many layouts are essentially sets of "cards" – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to make it so. In this next example I'm combining CSS Grid and Flexbox Layouts to make a simple product listing layout. +Many layouts are essentially sets of "cards" – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add [media queries](/en-US/docs/Web/CSS/CSS_media_queries) to make it so. In this next example I'm combining CSS grid and flexbox layouts to make a simple product listing layout. The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link. diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md index c29d8e37d74b061..61bd791072acf15 100644 --- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md +++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md @@ -6,11 +6,11 @@ page-type: guide {{CSSRef}} -CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using. +CSS grid layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using. ## Grid and flexbox -The basic difference between CSS grid layout and [CSS flexbox layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is that flexbox was designed for layout in one dimension - either a row _or_ a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid. +The basic difference between CSS grid layout and [CSS flexbox layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is that flexbox was designed for layout in one dimension - either a row _or_ a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid. ### One-dimensional versus two-dimensional layout @@ -69,7 +69,7 @@ A common question then is how to make those items line up. This is where you wan ### The same layout with CSS grids -In this next example, I create the same layout using Grid. This time we have three `1fr` column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two. +In this next example, I create the same layout using grid. This time we have three `1fr` column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two. ```css hidden * { @@ -119,17 +119,17 @@ A simple question to ask yourself when deciding between grid or flexbox is: In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space _on that line_. -Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track. +Grid works from the layout in. When you use CSS grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track. -If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice. +If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS grid layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice. ### Box alignment The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually. -The alignment properties from the flexbox specification have been added to a new specification called [Box Alignment Level 3](https://drafts.csswg.org/css-align/). This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well. +The alignment properties from the flexbox specification have been added to a new specification called [Box Alignment Level 3](https://drafts.csswg.org/css-align/). This means that they can be used in other specifications, including grid layout. In the future, they may well apply to other layout methods as well. -In a later guide in this series, I'll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid. +In a later guide in this series, I'll be taking a proper look at Box Alignment and how it works in grid layout. For now, here is a comparison between simple examples of flexbox and grid. In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to `flex-end` so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on `box1` so it will override the default and stretch to the height of the container and on `box2` so it aligns to the start of the flex container. @@ -177,7 +177,7 @@ In the first example, which uses flexbox, I have a container with three items in {{ EmbedLiveSample('Box_alignment', '300', '230') }} -### Alignment in CSS Grids +### Alignment in CSS grids This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to `start` and `end` rather than `flex-start` and `flex-end`. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells. @@ -467,7 +467,7 @@ I have given `.box3` position relative and then positioned the sub-item with the ## Grid and display: contents -A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and `display: contents`. The `contents` value of the display property is a new value that is described in the [Display specification](https://drafts.csswg.org/css-display/#box-generation) as follows: +A final interaction with another layout specification that is worth noting is the interaction between CSS grid layout and `display: contents`. The `contents` value of the display property is a new value that is described in the [Display specification](https://drafts.csswg.org/css-display/#box-generation) as follows: > "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree." @@ -592,7 +592,7 @@ If I now add `display: contents` to the rules for `box1`, the box for that item This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use `display: contents` in a similar way with flexbox to enable nested items to become flex items. -As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don't be afraid to mix it with other methods of doing layout to get the different effects you need. +As you can see from this guide, CSS grid layout is just one part of your toolkit. Don't be afraid to mix it with other methods of doing layout to get the different effects you need. ## See also diff --git a/files/en-us/web/css/css_grid_layout/subgrid/index.md b/files/en-us/web/css/css_grid_layout/subgrid/index.md index 7be230aabadb8ef..b0356137268985f 100644 --- a/files/en-us/web/css/css_grid_layout/subgrid/index.md +++ b/files/en-us/web/css/css_grid_layout/subgrid/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.grid-template-columns.subgrid {{CSSRef}} -Level 2 of the CSS Grid Layout specification includes a `subgrid` value for {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. This guide details what subgrid does and gives some use cases and design patterns that the feature solves. +Level 2 of the CSS grid layout specification includes a `subgrid` value for {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. This guide details what subgrid does and gives some use cases and design patterns that the feature solves. ## Introduction to subgrid @@ -63,13 +63,13 @@ You can see this in the example below. The parent grid has a gap of 20px for row {{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}} -If you inspect this in the Firefox Grid Inspector, you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item. +If you inspect this in the Firefox grid inspector, you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item. ![The smaller item displays in the gap as row-gap is set to 0 on the subgrid.](gap.png) ## Named grid lines -When using CSS Grid, you can name lines on your grid and then position items based on those names rather than the line number. The line names on the parent grid are passed into the subgrid, and you can place items using them. In the example below, I named lines on the parent `col-start` and `col-end` and then used those to place the subitem. +When using CSS grid, you can name lines on your grid and then position items based on those names rather than the line number. The line names on the parent grid are passed into the subgrid, and you can place items using them. In the example below, I named lines on the parent `col-start` and `col-end` and then used those to place the subitem. {{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}} @@ -95,5 +95,5 @@ As the subgrid value acts in much the same way as a regular nested grid, it is e ## See also -- On the Mozilla Developer YouTube Channel, see the videos [Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) and [Don't Wait To Use Subgrid For Better Card Layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4) -- [Hello Subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid) A presentation from CSSConf.eu +- Videos: [Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) and [Don't wait to use subgrid for better card layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4) +- [Hello subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid) A presentation from CSSConf.eu diff --git a/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md index 788add5876f1b91..ff60f8f6f4c6df9 100644 --- a/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md +++ b/files/en-us/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md @@ -12,7 +12,7 @@ The [CSS logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_p CSS 2.1 and earlier had sized things according to the physical dimensions of the screen. Therefore we describe boxes as having a {{CSSxRef("width")}} and {{CSSxRef("height")}}, position items from the `top` and `left`, assign borders, margin, and padding to the `top`, `right`, `bottom`, `left`, etc. The Logical properties and values module defines mappings for these {{glossary("physical properties")}} and values to their logical, or flow relative, counterparts — e.g. `start` and `end` as opposed to `left` and `right`/`top` and `bottom`. -These mappings are very useful for sites that get translated into languages with a different writing mode than the original layout. For example, with a CSS Grid layout, if the grid container has a width applied with the {{CSSxRef("align-self")}} and {{CSSxRef("justify-self")}} properties used to align the grid items, as these properties are flow relative, the `justify-self: start` aligns the item to the start on the inline dimension, and `align-self: start` does the same on the block dimension. +These mappings are very useful for sites that get translated into languages with a different writing mode than the original layout. For example, with a CSS grid layout, if the grid container has a width applied with the {{CSSxRef("align-self")}} and {{CSSxRef("justify-self")}} properties used to align the grid items, as these properties are flow relative, the `justify-self: start` aligns the item to the start on the inline dimension, and `align-self: start` does the same on the block dimension. ![A grid in a horizontal writing mode](grid-horizontal-width-sm.png) @@ -32,7 +32,7 @@ When working with a site in a writing mode other than a horizontal, top-to-botto ## Block and inline dimensions -A key concept of working with flow relative properties and values is the two dimensions of block and inline. CSS layout methods such as Flexbox and Grid Layout use the concepts of `block` and `inline` rather than `right` and `left`/`top` and `bottom` when aligning items. +A key concept of working with flow relative properties and values is the two dimensions of block and inline. CSS layout methods such as flexbox and grid layout use the concepts of `block` and `inline` rather than `right` and `left`/`top` and `bottom` when aligning items. The `inline` dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left-to-right, or an Arabic document with the text running horizontally right-to-left, the inline dimension is _horizontal_. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now _vertical_, as lines in that writing mode run vertically. diff --git a/files/en-us/web/css/css_types/index.md b/files/en-us/web/css/css_types/index.md index c656fa8116830b2..fdda7e3bc53aa9f 100644 --- a/files/en-us/web/css/css_types/index.md +++ b/files/en-us/web/css/css_types/index.md @@ -50,7 +50,7 @@ These types include keywords and identifiers as well as strings, and URLs. ## Numeric data types -These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the Values and Units specification, however additional types are described in other specifications where they are specific to that specification alone — for example the `fr` unit in [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/#fr-unit). +These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the Values and Units specification, however additional types are described in other specifications where they are specific to that specification alone — for example the `fr` unit in [CSS grid layout](https://www.w3.org/TR/css-grid-1/#fr-unit). - {{cssxref("<integer>")}} - : One or more decimal units 0 through 9. @@ -63,7 +63,7 @@ These data types are used to indicate quantities, indexes, and positions. The ma - {{cssxref("<ratio>")}} - : A ratio, written with the syntax ` / `. - {{cssxref("<flex>")}} - - : A flexible length introduced for [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), written as a `` with the `fr` unit attached and used for grid track sizing. + - : A flexible length introduced for [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), written as a `` with the `fr` unit attached and used for grid track sizing. ## Quantities diff --git a/files/en-us/web/css/display-inside/index.md b/files/en-us/web/css/display-inside/index.md index f16338fa4e5e6c0..40a099cecaa91fe 100644 --- a/files/en-us/web/css/display-inside/index.md +++ b/files/en-us/web/css/display-inside/index.md @@ -99,5 +99,5 @@ In this example the parent box has been given `display: flow-root` and so establ - {{CSSxRef("<display-box>")}} - {{CSSxRef("<display-legacy>")}} -- [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) -- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Basic Concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md index 567531e7f27fb0a..20ddc202a28794d 100644 --- a/files/en-us/web/css/display/index.md +++ b/files/en-us/web/css/display/index.md @@ -255,11 +255,11 @@ The individual pages for the different types of value that `display` can have se - [Mastering Wrapping of Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) - [Ordering Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) -- [Typical use cases of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) +- [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) ### display: grid -- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Basic Concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Relationship to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods) - [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) @@ -267,8 +267,8 @@ The individual pages for the different types of value that `display` can have se - [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) - [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- [CSS Grid Layout and Accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [CSS grid layout and Accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) +- [CSS grid layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) ### Animating display diff --git a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md index 2b570e792c026ed..aa5fc2c14caf060 100644 --- a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md +++ b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md @@ -20,7 +20,7 @@ h1 { } ``` -The `display` property also lets us use [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) when `display: grid` or `display: flex` is set. The important concept to understand is that changing an element's `display` value can change the formatting context of its direct children. When you use `display: flex` or `display: grid`, the element's children become flex or grid items and respond to the properties in grid and flexbox specifications. +The `display` property also lets us use [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) when `display: grid` or `display: flex` is set. The important concept to understand is that changing an element's `display` value can change the formatting context of its direct children. When you use `display: flex` or `display: grid`, the element's children become flex or grid items and respond to the properties in grid and flexbox specifications. What grid and flexbox demonstrate, however, is that an element has both an **outer** and an **inner** display type. The outer display type describes whether the element is block-level or inline-level. The inner display type describes how the children of that box behave. diff --git a/files/en-us/web/css/fit-content_function/index.md b/files/en-us/web/css/fit-content_function/index.md index 82901eeccb2c43d..5a8e3f941a54535 100644 --- a/files/en-us/web/css/fit-content_function/index.md +++ b/files/en-us/web/css/fit-content_function/index.md @@ -13,7 +13,7 @@ The **`fit-content()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CS {{EmbedInteractiveExample("pages/css/function-fit-content.html")}} -The function can be used as a track size in [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout) properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., [`minmax(auto, max-content)`](/en-US/docs/Web/CSS/minmax)), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum. +The function can be used as a track size in [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout) properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., [`minmax(auto, max-content)`](/en-US/docs/Web/CSS/minmax)), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum. See the {{cssxref("grid-template-columns")}} page for more information on the `max-content` and `auto` keywords. @@ -97,6 +97,6 @@ fit-content(40%) - Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module -- Related CSS Grid properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Related CSS grid properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index 112d3dd7d94072b..5c44297094e9127 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -17,7 +17,7 @@ The demo then changes the `flex-basis` on the first item. It will then grow and The image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become: -![The Firefox Flexbox Inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png) +![The Firefox flexbox inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png) > **Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority. @@ -187,6 +187,6 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) - {{cssxref("width")}} diff --git a/files/en-us/web/css/flex-direction/index.md b/files/en-us/web/css/flex-direction/index.md index 68c17f81997477d..1ad35abda1b8c06 100644 --- a/files/en-us/web/css/flex-direction/index.md +++ b/files/en-us/web/css/flex-direction/index.md @@ -138,5 +138,5 @@ Using the `flex-direction` property with values of `row-reverse` or `column-reve ## See also - CSS {{CSSXRef("flex-flow")}} shorthand property for the CSS `flex-direction` and {{CSSXRef("flex-wrap")}} properties. -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) diff --git a/files/en-us/web/css/flex-flow/index.md b/files/en-us/web/css/flex-flow/index.md index cf328ad8d37ed00..f54c26206423a0a 100644 --- a/files/en-us/web/css/flex-flow/index.md +++ b/files/en-us/web/css/flex-flow/index.md @@ -78,5 +78,5 @@ element { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) diff --git a/files/en-us/web/css/flex-shrink/index.md b/files/en-us/web/css/flex-shrink/index.md index 3e8d5b113ea762b..ecb646afd188060 100644 --- a/files/en-us/web/css/flex-shrink/index.md +++ b/files/en-us/web/css/flex-shrink/index.md @@ -98,5 +98,5 @@ The `flex-shrink` property is specified as a single ``. ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) diff --git a/files/en-us/web/css/flex-wrap/index.md b/files/en-us/web/css/flex-wrap/index.md index d8597dff734eb59..9ee90e027faca89 100644 --- a/files/en-us/web/css/flex-wrap/index.md +++ b/files/en-us/web/css/flex-wrap/index.md @@ -136,5 +136,5 @@ The following values are accepted: ## See also - CSS {{CSSXRef("flex-flow")}} shorthand property for the CSS `flex-wrap` and {{CSSXRef("flex-direction")}} properties. -- Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ +- Flexbox Guide: _[Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) diff --git a/files/en-us/web/css/flex_value/index.md b/files/en-us/web/css/flex_value/index.md index 7cc9f46c31bf1e2..f66d820121cc64c 100644 --- a/files/en-us/web/css/flex_value/index.md +++ b/files/en-us/web/css/flex_value/index.md @@ -22,7 +22,7 @@ The `` data type is specified as a {{cssxref("<number>")}} followed 2.5fr /* Using a float value */ ``` -### Example of use in a tracklisting for CSS Grid layout +### Example of use in a tracklisting for CSS grid layout ```css .grid { @@ -41,4 +41,4 @@ The `` data type is specified as a {{cssxref("<number>")}} followed ## See also -- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) diff --git a/files/en-us/web/css/grid-auto-columns/index.md b/files/en-us/web/css/grid-auto-columns/index.md index 36edbc20a20975d..b7cc48f898b4798 100644 --- a/files/en-us/web/css/grid-auto-columns/index.md +++ b/files/en-us/web/css/grid-auto-columns/index.md @@ -145,4 +145,4 @@ grid-auto-columns: unset; - Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} - Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid)_ -- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/en-us/web/css/grid-auto-flow/index.md b/files/en-us/web/css/grid-auto-flow/index.md index 28b820cbfcff256..a0f007a3a14f28c 100644 --- a/files/en-us/web/css/grid-auto-flow/index.md +++ b/files/en-us/web/css/grid-auto-flow/index.md @@ -147,4 +147,4 @@ inputElem.addEventListener("change", changeGridAutoFlow); - Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}} - Grid Layout Guide: _[Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)_ -- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/en-us/web/css/grid-auto-rows/index.md b/files/en-us/web/css/grid-auto-rows/index.md index b17b36fd00771c9..7faf8b9eccfbfcc 100644 --- a/files/en-us/web/css/grid-auto-rows/index.md +++ b/files/en-us/web/css/grid-auto-rows/index.md @@ -144,4 +144,4 @@ grid-auto-rows: unset; - Related CSS properties: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} - Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid)_ -- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/en-us/web/css/grid-column-end/index.md b/files/en-us/web/css/grid-column-end/index.md index a47f790896b33b1..bff4420c9d84ffc 100644 --- a/files/en-us/web/css/grid-column-end/index.md +++ b/files/en-us/web/css/grid-column-end/index.md @@ -156,5 +156,5 @@ grid-column-end: unset; ## See also - Related CSS properties: {{cssxref("grid-column-start")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-column-start/index.md b/files/en-us/web/css/grid-column-start/index.md index d939ea5fedc60d9..e55c52c43b5a5bf 100644 --- a/files/en-us/web/css/grid-column-start/index.md +++ b/files/en-us/web/css/grid-column-start/index.md @@ -164,5 +164,5 @@ This property is specified as a single `` value. A `` valu ## See also - Related CSS properties: {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-column/index.md b/files/en-us/web/css/grid-column/index.md index 1fd5cd23ecaf68e..f6869743eed31e2 100644 --- a/files/en-us/web/css/grid-column/index.md +++ b/files/en-us/web/css/grid-column/index.md @@ -151,6 +151,13 @@ Each `` value can be specified as: ## See also -- Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +Related CSS properties: + +- {{cssxref("grid-row")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} + +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) diff --git a/files/en-us/web/css/grid-row-end/index.md b/files/en-us/web/css/grid-row-end/index.md index f8d85d4f3e52165..7c8b4351dba9806 100644 --- a/files/en-us/web/css/grid-row-end/index.md +++ b/files/en-us/web/css/grid-row-end/index.md @@ -156,5 +156,5 @@ grid-row-end: unset; ## See also - Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-row-start/index.md b/files/en-us/web/css/grid-row-start/index.md index 1251a0ddb5f3885..6b5dbaacb92e620 100644 --- a/files/en-us/web/css/grid-row-start/index.md +++ b/files/en-us/web/css/grid-row-start/index.md @@ -164,5 +164,5 @@ This property is specified as a single `` value. A `` valu ## See also - Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-row/index.md b/files/en-us/web/css/grid-row/index.md index 65201954fd978fd..2b70d754ddf909f 100644 --- a/files/en-us/web/css/grid-row/index.md +++ b/files/en-us/web/css/grid-row/index.md @@ -151,5 +151,5 @@ Each `` value can be specified as: ## See also - Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-template-columns/index.md b/files/en-us/web/css/grid-template-columns/index.md index 379fd1a1a8c789a..2abcd6d96d70bce 100644 --- a/files/en-us/web/css/grid-template-columns/index.md +++ b/files/en-us/web/css/grid-template-columns/index.md @@ -145,5 +145,5 @@ grid-template-columns: unset; - Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} - Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks)_ -- Video tutorial: _[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)_ +- Video tutorial: _[Defining a grid](https://gridbyexample.com/video/series-define-a-grid/)_ - [Subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) diff --git a/files/en-us/web/css/grid-template-rows/index.md b/files/en-us/web/css/grid-template-rows/index.md index 3eabf8a735de81b..582325dffc507fb 100644 --- a/files/en-us/web/css/grid-template-rows/index.md +++ b/files/en-us/web/css/grid-template-rows/index.md @@ -146,5 +146,5 @@ This property may be specified as: - Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} - Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks)_ -- Video tutorial: _[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)_ +- Video tutorial: _[Defining a grid](https://gridbyexample.com/video/series-define-a-grid/)_ - [Subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) diff --git a/files/en-us/web/css/grid-template/index.md b/files/en-us/web/css/grid-template/index.md index bb8459fe5853491..8b9216dfc9f4cda 100644 --- a/files/en-us/web/css/grid-template/index.md +++ b/files/en-us/web/css/grid-template/index.md @@ -138,6 +138,6 @@ footer { ## See also - Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ - Video tutorial: _[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)_ diff --git a/files/en-us/web/css/grid/index.md b/files/en-us/web/css/grid/index.md index 40aad67f905423c..7f399991a2c46f7 100644 --- a/files/en-us/web/css/grid/index.md +++ b/files/en-us/web/css/grid/index.md @@ -133,5 +133,5 @@ grid: unset; ## See also - Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 494788c2568a5cd..1bb89c689b0c224 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -54,7 +54,7 @@ Our [CSS Learning Area](/en-US/docs/Learn/CSS) features multiple modules that te - [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values - [CSS shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [CSS Flexible Box Layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) - - [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) + - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) - [Media queries](/en-US/docs/Web/CSS/CSS_media_queries) - [Animation](/en-US/docs/Web/CSS/animation) diff --git a/files/en-us/web/css/justify-content/index.md b/files/en-us/web/css/justify-content/index.md index af4f862a5c7e73f..6760ff4ad30e3e4 100644 --- a/files/en-us/web/css/justify-content/index.md +++ b/files/en-us/web/css/justify-content/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.justify-content The [CSS](/en-US/docs/Web/CSS) **`justify-content`** property defines how the browser distributes space between and around content items along the {{Glossary("Main Axis", "main-axis")}} of a flex container, and the inline axis of a grid container. -The interactive example below demonstrates some of the values using Grid Layout. +The interactive example below demonstrates some of the values using grid layout. {{EmbedInteractiveExample("pages/css/justify-content.html")}} @@ -164,7 +164,7 @@ justifyContent.addEventListener("change", (evt) => { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md index c39ad89f503c843..d8c251b2e23f7d8 100644 --- a/files/en-us/web/css/justify-items/index.md +++ b/files/en-us/web/css/justify-items/index.md @@ -16,7 +16,7 @@ The effect of this property is dependent of the layout mode we are in: - In block-level layouts, it aligns the items inside their containing block on the inline axis. - For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. - In table cell layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables) about alignment in block, absolute positioned and table layout) -- In flexbox layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) about alignment in Flexbox) +- In flexbox layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) about alignment in flexbox) - In grid layouts, it aligns the items inside their grid areas on the inline axis ([more](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) about alignment in grid layouts) ## Syntax @@ -30,8 +30,8 @@ justify-items: stretch; justify-items: center; /* Pack items around the center */ justify-items: start; /* Pack items from the start */ justify-items: end; /* Pack items from the end */ -justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. */ -justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. */ +justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in flexbox layouts. */ +justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in flexbox layouts. */ justify-items: self-start; justify-items: self-end; justify-items: left; /* Pack items from the left */ @@ -184,7 +184,7 @@ span { ## See also -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("place-items")}} shorthand property - The {{CSSxRef("justify-self")}} property diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md index 57df6439fb0a6e6..2d3f41fd3595789 100644 --- a/files/en-us/web/css/justify-self/index.md +++ b/files/en-us/web/css/justify-self/index.md @@ -16,7 +16,7 @@ The effect of this property is dependent of the layout mode we are in: - In block-level layouts, it aligns an item inside its containing block on the inline axis. - For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. - In table cell layouts, this property is _ignored_. Read more about [alignment in block, absolute positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). -- In flexbox layouts, this property is _ignored_. Read more about [alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox). +- In flexbox layouts, this property is _ignored_. Read more about [alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox). - In grid layouts, it aligns an item inside its grid area on the inline axis. Read more about [alignment in grid layouts](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout). ## Syntax @@ -31,8 +31,8 @@ justify-self: stretch; justify-self: center; /* Pack item around the center */ justify-self: start; /* Pack item from the start */ justify-self: end; /* Pack item from the end */ -justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */ -justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */ +justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in flexbox layouts. */ +justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in flexbox layouts. */ justify-self: self-start; justify-self: self-end; justify-self: left; /* Pack item from the left */ @@ -192,6 +192,6 @@ span { ## See also -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("justify-items")}} property diff --git a/files/en-us/web/css/layout_cookbook/card/index.md b/files/en-us/web/css/layout_cookbook/card/index.md index ac6d484d7a6e5ac..1a27fc4a2ad73d9 100644 --- a/files/en-us/web/css/layout_cookbook/card/index.md +++ b/files/en-us/web/css/layout_cookbook/card/index.md @@ -28,7 +28,7 @@ The cards in the group should line up in two dimensions — both vertically and ## Choices made -Each card is laid out using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) despite the layout being one-dimensional. This enables the use of content sizing for the grid tracks. To set up a single-column grid we can use the following: +Each card is laid out using [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) despite the layout being one-dimensional. This enables the use of content sizing for the grid tracks. To set up a single-column grid we can use the following: ```css .card { @@ -75,4 +75,4 @@ Depending on the content of your card, there may be things you could or should d - {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} - [Inclusive Components: Card](https://inclusive-components.design/cards/) -- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) module +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module diff --git a/files/en-us/web/css/layout_cookbook/center_an_element/index.md b/files/en-us/web/css/layout_cookbook/center_an_element/index.md index 7c33795f49b7251..e1a0e964596c865 100644 --- a/files/en-us/web/css/layout_cookbook/center_an_element/index.md +++ b/files/en-us/web/css/layout_cookbook/center_an_element/index.md @@ -93,5 +93,5 @@ Instead of applying `place-items: center;` on the container, you can achieve the ## Resources on MDN -- [Box Alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box Alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - [CSS Box alignment guide](/en-US/docs/Web/CSS/CSS_box_alignment) diff --git a/files/en-us/web/css/layout_cookbook/column_layouts/index.md b/files/en-us/web/css/layout_cookbook/column_layouts/index.md index 658ea0e3b2d5010..c1e15205de1999e 100644 --- a/files/en-us/web/css/layout_cookbook/column_layouts/index.md +++ b/files/en-us/web/css/layout_cookbook/column_layouts/index.md @@ -70,7 +70,7 @@ Use flexbox: ### Lining items up in rows and columns — grid layout -If you want a two-dimensional grid where items line up in rows _and_ columns, then you should choose CSS Grid Layout. Similar to how flexbox works on the direct children of the flex container, grid layout works on the direct children of the grid container. Just set {{cssxref("display", "display: grid;")}} on the container. Properties set on this container — like {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} — define how the items are distributed along rows and columns. +If you want a two-dimensional grid where items line up in rows _and_ columns, then you should choose CSS grid layout. Similar to how flexbox works on the direct children of the flex container, grid layout works on the direct children of the grid container. Just set {{cssxref("display", "display: grid;")}} on the container. Properties set on this container — like {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} — define how the items are distributed along rows and columns. {{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}} @@ -78,7 +78,7 @@ If you want a two-dimensional grid where items line up in rows _and_ columns, th > > [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-grid--download.html) -Use Grid: +Use grid: - For multiple rows or columns of items. - When you want to be able to align the items on the block and inline axes. @@ -87,5 +87,5 @@ Use Grid: ## Resources on MDN - [Guide to Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout) -- [Guide to Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) -- [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) +- [Guide to flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) +- [Guide to CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) diff --git a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md index 284538d170bda61..91adb20219195f2 100644 --- a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md @@ -39,11 +39,11 @@ To center the grid horizontally on the page you can set a `max-width` along with ## Accessibility concerns -Although CSS grid enables positioning items anywhere (within reason), ensuring that your underlying markup follows a logical order is important (see [CSS Grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) for more details). +Although CSS grid enables positioning items anywhere (within reason), ensuring that your underlying markup follows a logical order is important (see [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) for more details). ## See also - {{Cssxref("grid-template-columns")}} property - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module -- [CSS Grid: More flexibility with minmax()](https://css-irl.info/more-flexibility-with-minmax/) (2018) +- [CSS grid: More flexibility with minmax()](https://css-irl.info/more-flexibility-with-minmax/) (2018) - [Breaking out with CSS grid](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/) (2017) diff --git a/files/en-us/web/css/layout_cookbook/index.md b/files/en-us/web/css/layout_cookbook/index.md index 637bed0fa35c9dc..c74c5ca2f6baf2f 100644 --- a/files/en-us/web/css/layout_cookbook/index.md +++ b/files/en-us/web/css/layout_cookbook/index.md @@ -14,16 +14,16 @@ The CSS layout cookbook aims to bring together recipes for common layout pattern | Recipe | Description | Layout Methods | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Media objects](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects) | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout), {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing | -| [Columns](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) | When to choose multi-column layout, flexbox or grid for your columns. | [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout), [Multicol](/en-US/docs/Web/CSS/CSS_multicol_layout), [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) | +| [Media objects](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects) | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout), {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing | +| [Columns](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) | When to choose multi-column layout, flexbox or grid for your columns. | [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout), [Multicol](/en-US/docs/Web/CSS/CSS_multicol_layout), [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) | | [Center an element](/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element) | How to center an item horizontally and vertically. | [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) | -| [Sticky footers](/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers) | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout), [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) | +| [Sticky footers](/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers) | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout), [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) | | [Split navigation](/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation) | A navigation pattern where some links are visually separated from the others. | [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), {{cssxref("margin")}} | | [Breadcrumb navigation](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation) | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) | | [List group with badges](/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges) | A list of items with a badge to display a count. | [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) | | [Pagination](/en-US/docs/Web/CSS/Layout_cookbook/Pagination) | Links to pages of content (such as search results). | [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) | | [Card](/en-US/docs/Web/CSS/Layout_cookbook/Card) | A card component, which displays in a grid of cards. | [Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) | -| [Grid wrapper](/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | For aligning grid content within a central wrapper, while also allowing items to break out. | [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout) | +| [Grid wrapper](/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | For aligning grid content within a central wrapper, while also allowing items to break out. | [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout) | ## Contribute a Recipe diff --git a/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md b/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md index c74f699b1dadbbb..069613e2b77bbf6 100644 --- a/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md +++ b/files/en-us/web/css/layout_cookbook/list_group_with_badges/index.md @@ -32,6 +32,6 @@ To align the content horizontally, I use the {{cssxref("align-items")}} property ## See also -- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module diff --git a/files/en-us/web/css/layout_cookbook/sticky_footers/index.md b/files/en-us/web/css/layout_cookbook/sticky_footers/index.md index 780de8099527f73..293531ae069c91a 100644 --- a/files/en-us/web/css/layout_cookbook/sticky_footers/index.md +++ b/files/en-us/web/css/layout_cookbook/sticky_footers/index.md @@ -28,13 +28,13 @@ The Sticky footer pattern needs to meet the following requirements: ## Choices made -In the above example we achieve the sticky footer using CSS Grid Layout. The `.wrapper` has a minimum height of `100%` which means it is as tall as the container it is in. We then create a single column grid layout with three rows, one row for each part of our layout. +In the above example we achieve the sticky footer using CSS grid layout. The `.wrapper` has a minimum height of `100%` which means it is as tall as the container it is in. We then create a single column grid layout with three rows, one row for each part of our layout. Grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the `1fr` track and the footer into the final auto sized track. The `1fr` track will take up all available space and so grows to fill the gap. ## Alternate method -You can also use Flexbox to create a sticky footer. +You can also use flexbox to create a sticky footer. {{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}} diff --git a/files/en-us/web/css/masonry-auto-flow/index.md b/files/en-us/web/css/masonry-auto-flow/index.md index f533d8f799f5da6..48dd26ad8c94e99 100644 --- a/files/en-us/web/css/masonry-auto-flow/index.md +++ b/files/en-us/web/css/masonry-auto-flow/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.masonry-auto-flow {{CSSRef}}{{SeeCompatTable}} -The **`masonry-auto-flow`** [CSS](/en-US/docs/Web/CSS) property modifies how items are placed when using [masonry](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). +The **`masonry-auto-flow`** [CSS](/en-US/docs/Web/CSS) property modifies how items are placed when using [masonry](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). ## Syntax diff --git a/files/en-us/web/css/minmax/index.md b/files/en-us/web/css/minmax/index.md index 62f2127b0cda263..e1c4d2900be6bd0 100644 --- a/files/en-us/web/css/minmax/index.md +++ b/files/en-us/web/css/minmax/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.grid-template-columns.minmax {{CSSRef}} -The **`minmax()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) defines a size range greater than or equal to _min_ and less than or equal to _max_. It is used with [CSS Grids](/en-US/docs/Web/CSS/CSS_grid_layout). +The **`minmax()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) defines a size range greater than or equal to _min_ and less than or equal to _max_. It is used with [CSS grids](/en-US/docs/Web/CSS/CSS_grid_layout). {{EmbedInteractiveExample("pages/css/function-minmax.html")}} diff --git a/files/en-us/web/css/order/index.md b/files/en-us/web/css/order/index.md index 1d6c5f48ff45c6e..05529fe9858ec35 100644 --- a/files/en-us/web/css/order/index.md +++ b/files/en-us/web/css/order/index.md @@ -107,6 +107,6 @@ main > aside { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items)_ -- CSS Grid Guide: _[CSS Grid Layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- CSS grid guide: _[CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)_ diff --git a/files/en-us/web/css/place-content/index.md b/files/en-us/web/css/place-content/index.md index e9c3e2abd103ae4..37d87aeb14b0199 100644 --- a/files/en-us/web/css/place-content/index.md +++ b/files/en-us/web/css/place-content/index.md @@ -235,9 +235,9 @@ div > div { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("align-content")}} property - The {{CSSxRef("justify-content")}} property diff --git a/files/en-us/web/css/place-items/index.md b/files/en-us/web/css/place-items/index.md index 1f4fff00695e761..75925a90477e49c 100644 --- a/files/en-us/web/css/place-items/index.md +++ b/files/en-us/web/css/place-items/index.md @@ -306,9 +306,9 @@ values.addEventListener("change", (evt) => { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("align-items")}} property - The {{CSSxRef("align-self")}} property diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md index 34c9c126e7a69ae..223997607588ddb 100644 --- a/files/en-us/web/css/place-self/index.md +++ b/files/en-us/web/css/place-self/index.md @@ -163,9 +163,9 @@ span { ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{cssxref("align-self")}} property - The {{cssxref("justify-self")}} property diff --git a/files/en-us/web/css/repeat/index.md b/files/en-us/web/css/repeat/index.md index 1a435c0e5652192..b463340e4a13d54 100644 --- a/files/en-us/web/css/repeat/index.md +++ b/files/en-us/web/css/repeat/index.md @@ -11,7 +11,7 @@ The **`repeat()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS {{EmbedInteractiveExample("pages/css/function-repeat.html")}} -This function can be used in the CSS Grid properties {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. +This function can be used in the CSS grid properties {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. ## Syntax @@ -169,5 +169,5 @@ There is a fourth form, ``, which is used to add line names to subg ## See also - Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ diff --git a/files/en-us/web/css/vertical-align/index.md b/files/en-us/web/css/vertical-align/index.md index dc23fcbe2cbf545..676dd39c3e83107 100644 --- a/files/en-us/web/css/vertical-align/index.md +++ b/files/en-us/web/css/vertical-align/index.md @@ -256,7 +256,7 @@ td { ## See also -- [Typical use cases of Flexbox, section "Center item"](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item) +- [Typical use cases of flexbox, section "Center item"](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item) - {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}} - [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html) - [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align) From e442ace80b15c92dd8afd6465c0634731cd5e5f8 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:39:50 -0700 Subject: [PATCH 2/9] Minor: Capitalization: CSS directory --- files/en-us/web/css/align-content/index.md | 4 ++-- files/en-us/web/css/align-self/index.md | 4 ++-- files/en-us/web/css/column-gap/index.md | 9 +++---- .../box_alignment_in_flexbox/index.md | 5 ---- .../box_alignment_in_grid_layout/index.md | 9 ++----- .../en-us/web/css/css_box_alignment/index.md | 11 +++------ .../index.md | 5 ---- .../css_grid_layout/masonry_layout/index.md | 2 +- files/en-us/web/css/display/index.md | 24 +++++++++---------- files/en-us/web/css/flex-wrap/index.md | 2 +- .../en-us/web/css/grid-auto-columns/index.md | 8 ++++--- files/en-us/web/css/grid-column-end/index.md | 10 +++++--- .../en-us/web/css/grid-column-start/index.md | 10 +++++--- 13 files changed, 47 insertions(+), 56 deletions(-) diff --git a/files/en-us/web/css/align-content/index.md b/files/en-us/web/css/align-content/index.md index c2d7ac8adcc24e8..df5dc60f03f6599 100644 --- a/files/en-us/web/css/align-content/index.md +++ b/files/en-us/web/css/align-content/index.md @@ -245,8 +245,8 @@ In [block layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_a - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) - [Block-level_content](/en-US/docs/Glossary/Block-level_content) - {{CSSXRef("display")}} diff --git a/files/en-us/web/css/align-self/index.md b/files/en-us/web/css/align-self/index.md index a830d30e2264b45..7c6a8d2f9ebf6e8 100644 --- a/files/en-us/web/css/align-self/index.md +++ b/files/en-us/web/css/align-self/index.md @@ -140,6 +140,6 @@ div:nth-child(3) { - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{cssxref("align-items")}} property diff --git a/files/en-us/web/css/column-gap/index.md b/files/en-us/web/css/column-gap/index.md index fe83e43818b84aa..d0da8a068036ba5 100644 --- a/files/en-us/web/css/column-gap/index.md +++ b/files/en-us/web/css/column-gap/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.column-gap The **`column-gap`** [CSS](/en-US/docs/Web/CSS) property sets the size of the gap ({{glossary("Gutters","gutter")}}) between an element's columns. -Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in Multi-column, Flexible Box, and grid layouts. +Initially a part of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment), it may be used in multi-column, flexible box, and grid layouts. Early versions of the specification called this property `grid-column-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-column-gap` as an alias for `column-gap`. @@ -176,6 +176,7 @@ div:nth-of-type(3n) { ## See also -- Related CSS properties: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}} -- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters)_ -- Multi-column Layout Guide: _[Styling Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)_ +- {{CSSxRef("row-gap")}} +- {{CSSxRef("gap")}} +- [Basic concepts of grid layout: gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters) +- [Styling Columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns) diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md index b51654e3cf3e066..7e78d912337699e 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md @@ -86,8 +86,3 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l ## Guides - [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - -## External Resources - -- [CSS grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) -- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md index 7309dd5a45f2182..b18ef81173e3d18 100644 --- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md +++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md @@ -82,14 +82,9 @@ The updated properties have not yet been implemented in all browsers. Therefore, ### Glossary Entries -- [Cross Axis](/en-US/docs/Glossary/Cross_Axis) -- [Main Axis](/en-US/docs/Glossary/Main_Axis) +- [Cross axis](/en-US/docs/Glossary/Cross_Axis) +- [Main axis](/en-US/docs/Glossary/Main_Axis) ## Guides - [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - -## External Resources - -- [CSS grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) -- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md index 8ec05901e1ba7f3..538bc10bcaa79d2 100644 --- a/files/en-us/web/css/css_box_alignment/index.md +++ b/files/en-us/web/css/css_box_alignment/index.md @@ -197,11 +197,6 @@ As the CSS box alignment properties are implemented differently depending on the ## Guides -- CSS flexbox guide: _[Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS flexbox guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ - -## External Resources - -- [CSS grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/) -- [Thoughts on partial implementations of Box alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/) +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md index 487b0cfbf8182e4..a556f5c843690a6 100644 --- a/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md +++ b/files/en-us/web/css/css_grid_layout/grid_layout_and_progressive_enhancement/index.md @@ -384,8 +384,3 @@ The alignment property {{cssxref("vertical-align")}} has no effect on a grid ite ### Multiple-column layout You can also use multiple column layout as your legacy browser plan, as the `column-*` properties do not apply when applied to a grid container. - -## Further reading - -- For an excellent explanation of feature queries, and how to use them well, see [Using Feature Queries in CSS (2016)](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/). -- [CSS grid and the New Autoprefixer (2018)](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/) diff --git a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md index e25920330de175b..afdcdec8af4705d 100644 --- a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md +++ b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md @@ -66,4 +66,4 @@ In browsers [that do not support masonry](#browser_compatibility), regular grid ## See also -- [Native CSS Masonry Layout In CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/) +- [Native CSS masonry layout in CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/) diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md index 20ddc202a28794d..a50d1921660e0d0 100644 --- a/files/en-us/web/css/display/index.md +++ b/files/en-us/web/css/display/index.md @@ -241,25 +241,25 @@ The individual pages for the different types of value that `display` can have se ### CSS Flow Layout (display: block, display: inline) -- [Block and Inline Layout in Normal Flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) -- [Flow Layout and Overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow) -- [Flow Layout and Writing Modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) -- [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) -- [In Flow and Out of Flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) +- [Block and inline layout in normal flow](/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow) +- [Flow layout and overflow](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow) +- [Flow layout and writing modes](/en-US/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes) +- [Formatting contexts explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts) +- [In flow and out of flow](/en-US/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow) ### display: flex - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) -- [Aligning Items in a Flex Container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- [Controlling Ratios of Flex Items Along the Main Axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) -- [Mastering Wrapping of Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) -- [Ordering Flex Items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) +- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) - [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) - [Typical use cases of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) ### display: grid -- [Basic Concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Relationship to other layout methods](/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods) - [Line-based placement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) @@ -267,8 +267,8 @@ The individual pages for the different types of value that `display` can have se - [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) - [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- [CSS grid layout and Accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) -- [CSS grid layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) +- [CSS grid layout and progressive enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) - [Realizing common layouts using grids](/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids) ### Animating display diff --git a/files/en-us/web/css/flex-wrap/index.md b/files/en-us/web/css/flex-wrap/index.md index 9ee90e027faca89..9a77d46b1bf605e 100644 --- a/files/en-us/web/css/flex-wrap/index.md +++ b/files/en-us/web/css/flex-wrap/index.md @@ -136,5 +136,5 @@ The following values are accepted: ## See also - CSS {{CSSXRef("flex-flow")}} shorthand property for the CSS `flex-wrap` and {{CSSXRef("flex-direction")}} properties. -- Flexbox Guide: _[Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) diff --git a/files/en-us/web/css/grid-auto-columns/index.md b/files/en-us/web/css/grid-auto-columns/index.md index b7cc48f898b4798..572f3be425830d4 100644 --- a/files/en-us/web/css/grid-auto-columns/index.md +++ b/files/en-us/web/css/grid-auto-columns/index.md @@ -143,6 +143,8 @@ grid-auto-columns: unset; ## See also -- Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} -- Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid)_ -- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-flow")}} +- {{cssxref("grid")}} +- [Auto-placement in grid layout: sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid) +- Video: [Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/) diff --git a/files/en-us/web/css/grid-column-end/index.md b/files/en-us/web/css/grid-column-end/index.md index bff4420c9d84ffc..984f49dd8d66dbb 100644 --- a/files/en-us/web/css/grid-column-end/index.md +++ b/files/en-us/web/css/grid-column-end/index.md @@ -155,6 +155,10 @@ grid-column-end: unset; ## See also -- Related CSS properties: {{cssxref("grid-column-start")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-row")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) diff --git a/files/en-us/web/css/grid-column-start/index.md b/files/en-us/web/css/grid-column-start/index.md index e55c52c43b5a5bf..feaa165b8f65579 100644 --- a/files/en-us/web/css/grid-column-start/index.md +++ b/files/en-us/web/css/grid-column-start/index.md @@ -163,6 +163,10 @@ This property is specified as a single `` value. A `` valu ## See also -- Related CSS properties: {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-column")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-row")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) From 01a22ee58c66d5b79c2789b3ff5dfe6fed210a99 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:42:52 -0700 Subject: [PATCH 3/9] Minor: Capitalization: CSS directory --- files/en-us/web/css/grid-auto-flow/index.md | 8 +++++--- files/en-us/web/css/grid-auto-rows/index.md | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/grid-auto-flow/index.md b/files/en-us/web/css/grid-auto-flow/index.md index a0f007a3a14f28c..c1632c1cf956d1d 100644 --- a/files/en-us/web/css/grid-auto-flow/index.md +++ b/files/en-us/web/css/grid-auto-flow/index.md @@ -145,6 +145,8 @@ inputElem.addEventListener("change", changeGridAutoFlow); ## See also -- Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}} -- Grid Layout Guide: _[Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout)_ -- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid")}} +- [Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) +- Video: [Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/) diff --git a/files/en-us/web/css/grid-auto-rows/index.md b/files/en-us/web/css/grid-auto-rows/index.md index 7faf8b9eccfbfcc..72622f77493cb8b 100644 --- a/files/en-us/web/css/grid-auto-rows/index.md +++ b/files/en-us/web/css/grid-auto-rows/index.md @@ -142,6 +142,8 @@ grid-auto-rows: unset; ## See also -- Related CSS properties: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} -- Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid)_ -- Video tutorial: _[Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-flow")}} +- {{cssxref("grid")}} +- [Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout#sizing_rows_in_the_implicit_grid) +- Video: [Introducing grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/) From 6bb0f8707163c4375153498ffa7a3f90e981ae56 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:54:51 -0700 Subject: [PATCH 4/9] Minor: Capitalization: CSS directory --- files/en-us/web/css/fit-content_function/index.md | 15 +++++++++++---- files/en-us/web/css/grid-area/index.md | 12 +++++++++--- files/en-us/web/css/grid-column/index.md | 2 -- files/en-us/web/css/grid-row-end/index.md | 10 +++++++--- files/en-us/web/css/grid-row-start/index.md | 2 +- files/en-us/web/css/grid-row/index.md | 2 +- files/en-us/web/css/grid-template-areas/index.md | 8 +++++--- .../en-us/web/css/grid-template-columns/index.md | 8 +++++--- files/en-us/web/css/grid-template-rows/index.md | 8 +++++--- files/en-us/web/css/grid-template/index.md | 10 ++++++---- files/en-us/web/css/minmax/index.md | 4 ++-- files/en-us/web/css/repeat/index.md | 4 ++-- 12 files changed, 54 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/css/fit-content_function/index.md b/files/en-us/web/css/fit-content_function/index.md index 5a8e3f941a54535..486b4d5eb22a648 100644 --- a/files/en-us/web/css/fit-content_function/index.md +++ b/files/en-us/web/css/fit-content_function/index.md @@ -95,8 +95,15 @@ fit-content(40%) ## See also -- Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- {{cssxref("min-content")}} keyterm +- {{cssxref("max-content")}} keyterm - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module -- Related CSS grid properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ +- {{cssxref("grid-template")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-flow")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) diff --git a/files/en-us/web/css/grid-area/index.md b/files/en-us/web/css/grid-area/index.md index e89d537f6cea7b6..9dba06490111474 100644 --- a/files/en-us/web/css/grid-area/index.md +++ b/files/en-us/web/css/grid-area/index.md @@ -147,6 +147,12 @@ grid-area: unset; ## See also -- Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}} -- Grid Layout Guide: _[Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)_ -- Video tutorial: _[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)_ +- {{cssxref("grid-row")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-column")}} +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-template-areas")}} +- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) +- Video: [Grid template areas](https://gridbyexample.com/video/grid-template-areas/) diff --git a/files/en-us/web/css/grid-column/index.md b/files/en-us/web/css/grid-column/index.md index f6869743eed31e2..6daf38335952642 100644 --- a/files/en-us/web/css/grid-column/index.md +++ b/files/en-us/web/css/grid-column/index.md @@ -151,8 +151,6 @@ Each `` value can be specified as: ## See also -Related CSS properties: - - {{cssxref("grid-row")}} - {{cssxref("grid-row-start")}} - {{cssxref("grid-row-end")}} diff --git a/files/en-us/web/css/grid-row-end/index.md b/files/en-us/web/css/grid-row-end/index.md index 7c8b4351dba9806..9912b0bcca269b1 100644 --- a/files/en-us/web/css/grid-row-end/index.md +++ b/files/en-us/web/css/grid-row-end/index.md @@ -155,6 +155,10 @@ grid-row-end: unset; ## See also -- Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row")}} +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-column")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) diff --git a/files/en-us/web/css/grid-row-start/index.md b/files/en-us/web/css/grid-row-start/index.md index 6b5dbaacb92e620..6e3e62294bb5d35 100644 --- a/files/en-us/web/css/grid-row-start/index.md +++ b/files/en-us/web/css/grid-row-start/index.md @@ -164,5 +164,5 @@ This property is specified as a single `` value. A `` valu ## See also - Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-row/index.md b/files/en-us/web/css/grid-row/index.md index 2b70d754ddf909f..c03b72d34bbbca2 100644 --- a/files/en-us/web/css/grid-row/index.md +++ b/files/en-us/web/css/grid-row/index.md @@ -151,5 +151,5 @@ Each `` value can be specified as: ## See also - Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/en-us/web/css/grid-template-areas/index.md b/files/en-us/web/css/grid-template-areas/index.md index 1612322086dcf7f..737177a6e91d2ee 100644 --- a/files/en-us/web/css/grid-template-areas/index.md +++ b/files/en-us/web/css/grid-template-areas/index.md @@ -118,6 +118,8 @@ In the above code, a null token (`.`) was used to create an unnamed area in the ## See also -- Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}} -- Grid Layout Guide: _[Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas)_ -- Video tutorial: _[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)_ +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template")}} +- [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) +- Video: [Grid template areas](https://gridbyexample.com/video/grid-template-areas/) diff --git a/files/en-us/web/css/grid-template-columns/index.md b/files/en-us/web/css/grid-template-columns/index.md index 2abcd6d96d70bce..418eabac6ce4caf 100644 --- a/files/en-us/web/css/grid-template-columns/index.md +++ b/files/en-us/web/css/grid-template-columns/index.md @@ -143,7 +143,9 @@ grid-template-columns: unset; ## See also -- Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} -- Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks)_ -- Video tutorial: _[Defining a grid](https://gridbyexample.com/video/series-define-a-grid/)_ +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-template")}} +- [Basic concepts of grid layout: grid tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks) +- Video: [Defining a grid](https://gridbyexample.com/video/series-define-a-grid/) - [Subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) diff --git a/files/en-us/web/css/grid-template-rows/index.md b/files/en-us/web/css/grid-template-rows/index.md index 582325dffc507fb..7fae998c90162b0 100644 --- a/files/en-us/web/css/grid-template-rows/index.md +++ b/files/en-us/web/css/grid-template-rows/index.md @@ -144,7 +144,9 @@ This property may be specified as: ## See also -- Related CSS properties: {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} -- Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks)_ -- Video tutorial: _[Defining a grid](https://gridbyexample.com/video/series-define-a-grid/)_ +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-template")}} +- [Basic concepts of grid layout: grid tracks](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_tracks) +- Video: [Defining a grid](https://gridbyexample.com/video/series-define-a-grid/) - [Subgrid](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) diff --git a/files/en-us/web/css/grid-template/index.md b/files/en-us/web/css/grid-template/index.md index 8b9216dfc9f4cda..4e4f65c55f0a69a 100644 --- a/files/en-us/web/css/grid-template/index.md +++ b/files/en-us/web/css/grid-template/index.md @@ -137,7 +137,9 @@ footer { ## See also -- Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ -- Video tutorial: _[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)_ +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) +- Video: [Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/) diff --git a/files/en-us/web/css/minmax/index.md b/files/en-us/web/css/minmax/index.md index e1c4d2900be6bd0..d6d05ee564c1835 100644 --- a/files/en-us/web/css/minmax/index.md +++ b/files/en-us/web/css/minmax/index.md @@ -121,6 +121,6 @@ If _max_ < _min_, then _max_ is ignored and `minmax(min,max)` is treated as _min ## See also -- Grid Layout Guide: _[Basic concepts of grid layout - track sizing with minmax()](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#track_sizing_and_minmax)_ +- [Basic concepts of grid layout: track sizing with minmax()](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#track_sizing_and_minmax) - [CSS grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- Video tutorial: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ +- Video: [Introducing minmax()](https://gridbyexample.com/video/series-minmax/) diff --git a/files/en-us/web/css/repeat/index.md b/files/en-us/web/css/repeat/index.md index b463340e4a13d54..610656b362ef3be 100644 --- a/files/en-us/web/css/repeat/index.md +++ b/files/en-us/web/css/repeat/index.md @@ -169,5 +169,5 @@ There is a fourth form, ``, which is used to add line names to subg ## See also - Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) From 8939cd92dc3bffdf9c4aec04720aa0d1e36fd121 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:57:06 -0700 Subject: [PATCH 5/9] i missed a spot --- files/en-us/web/css/grid-row-start/index.md | 8 ++++++-- files/en-us/web/css/grid-row/index.md | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/grid-row-start/index.md b/files/en-us/web/css/grid-row-start/index.md index 6e3e62294bb5d35..03578e500a2a922 100644 --- a/files/en-us/web/css/grid-row-start/index.md +++ b/files/en-us/web/css/grid-row-start/index.md @@ -163,6 +163,10 @@ This property is specified as a single `` value. A `` valu ## See also -- Related CSS properties: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-row")}} +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-column")}} - [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) diff --git a/files/en-us/web/css/grid-row/index.md b/files/en-us/web/css/grid-row/index.md index c03b72d34bbbca2..6ae4b093935dd70 100644 --- a/files/en-us/web/css/grid-row/index.md +++ b/files/en-us/web/css/grid-row/index.md @@ -150,6 +150,10 @@ Each `` value can be specified as: ## See also -- Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} +- {{cssxref("grid-column")}} +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} - [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) -- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ +- Video: [Line-based placement](https://gridbyexample.com/video/series-line-based-placement/) From b9aef922a6f4af65a820101ddd964c5529ea4d40 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 19:59:17 -0700 Subject: [PATCH 6/9] i missed a spot --- files/en-us/web/css/grid-template/index.md | 2 +- files/en-us/web/css/grid/index.md | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/grid-template/index.md b/files/en-us/web/css/grid-template/index.md index 4e4f65c55f0a69a..43db8901c39c8cc 100644 --- a/files/en-us/web/css/grid-template/index.md +++ b/files/en-us/web/css/grid-template/index.md @@ -142,4 +142,4 @@ footer { - {{cssxref("grid-template-areas")}} - [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) -- Video: [Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/) +- Video: [Grid template shorthand](https://gridbyexample.com/video/grid-template-shorthand/) diff --git a/files/en-us/web/css/grid/index.md b/files/en-us/web/css/grid/index.md index 7f399991a2c46f7..62b0c3ff04ce84b 100644 --- a/files/en-us/web/css/grid/index.md +++ b/files/en-us/web/css/grid/index.md @@ -132,6 +132,12 @@ grid: unset; ## See also -- Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- Grid Layout Guide: _[Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ -- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ +- {{cssxref("grid-template")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-flow")}} +- [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) +- [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) From 7cb40ce51370032eccf2fdf20b21b178a1c0fb7e Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 20:00:23 -0700 Subject: [PATCH 7/9] i missed a spot --- files/en-us/web/css/box-align/index.md | 2 +- files/en-us/web/css/box-direction/index.md | 2 +- files/en-us/web/css/box-flex-group/index.md | 2 +- files/en-us/web/css/box-flex/index.md | 2 +- files/en-us/web/css/box-lines/index.md | 2 +- files/en-us/web/css/box-ordinal-group/index.md | 2 +- files/en-us/web/css/box-orient/index.md | 2 +- files/en-us/web/css/box-pack/index.md | 2 +- files/en-us/web/css/index.md | 2 +- .../web/css/layout_cookbook/breadcrumb_navigation/index.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/box-align/index.md b/files/en-us/web/css/box-align/index.md index 27981215936c7bf..3b542facba79d2b 100644 --- a/files/en-us/web/css/box-align/index.md +++ b/files/en-us/web/css/box-align/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-align {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. The **`box-align`** [CSS](/en-US/docs/Web/CSS) property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box. diff --git a/files/en-us/web/css/box-direction/index.md b/files/en-us/web/css/box-direction/index.md index f3febb9ef7b6146..13a930fb07a8529 100644 --- a/files/en-us/web/css/box-direction/index.md +++ b/files/en-us/web/css/box-direction/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-direction {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`box-direction`** [CSS](/en-US/docs/Web/CSS) property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge). diff --git a/files/en-us/web/css/box-flex-group/index.md b/files/en-us/web/css/box-flex-group/index.md index d0e698e0a2b3b1a..5f650b71d33d049 100644 --- a/files/en-us/web/css/box-flex-group/index.md +++ b/files/en-us/web/css/box-flex-group/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-flex-group {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`box-flex-group`** [CSS](/en-US/docs/Web/CSS) property assigns the flexbox's child elements to a flex group. diff --git a/files/en-us/web/css/box-flex/index.md b/files/en-us/web/css/box-flex/index.md index dcbbe47a2edd40e..525baa1e71cdb6c 100644 --- a/files/en-us/web/css/box-flex/index.md +++ b/files/en-us/web/css/box-flex/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-flex {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}} -> **Warning:** This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for '`box-flex`' (which were based on this property) or the behavior of '`-webkit-box-flex`' (which is based on those drafts). See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property for controlling parts of the XUL box model. It does not match either the old CSS flexible box layout Module drafts for '`box-flex`' (which were based on this property) or the behavior of '`-webkit-box-flex`' (which is based on those drafts). See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`-moz-box-flex`** and **`-webkit-box-flex`** [CSS](/en-US/docs/Web/CSS) properties specify how a `-moz-box` or `-webkit-box` grows to fill the box that contains it, in the direction of the containing box's layout. diff --git a/files/en-us/web/css/box-lines/index.md b/files/en-us/web/css/box-lines/index.md index ac38f1b15c8642d..8f6531e74e70f5f 100644 --- a/files/en-us/web/css/box-lines/index.md +++ b/files/en-us/web/css/box-lines/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-lines {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`box-lines`** [CSS](/en-US/docs/Web/CSS) property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes). diff --git a/files/en-us/web/css/box-ordinal-group/index.md b/files/en-us/web/css/box-ordinal-group/index.md index 33f14f85489350a..a09d0047c11b8dc 100644 --- a/files/en-us/web/css/box-ordinal-group/index.md +++ b/files/en-us/web/css/box-ordinal-group/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-ordinal-group {{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`box-ordinal-group`** [CSS](/en-US/docs/Web/CSS) property assigns the flexbox's child elements to an ordinal group. diff --git a/files/en-us/web/css/box-orient/index.md b/files/en-us/web/css/box-orient/index.md index 9435481d51c2200..2bb71b566c21e75 100644 --- a/files/en-us/web/css/box-orient/index.md +++ b/files/en-us/web/css/box-orient/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-orient {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`box-orient`** [CSS](/en-US/docs/Web/CSS) property sets whether an element lays out its contents horizontally or vertically. diff --git a/files/en-us/web/css/box-pack/index.md b/files/en-us/web/css/box-pack/index.md index 38cb42fe6089d57..af05205078fe675 100644 --- a/files/en-us/web/css/box-pack/index.md +++ b/files/en-us/web/css/box-pack/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.box-pack {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. +> **Warning:** This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) for information about the current standard. The **`-moz-box-pack`** and **`-webkit-box-pack`** [CSS](/en-US/docs/Web/CSS) properties specify how a `-moz-box` or `-webkit-box` packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 1bb89c689b0c224..b2e9d6af7af5e46 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -53,7 +53,7 @@ Our [CSS Learning Area](/en-US/docs/Learn/CSS) features multiple modules that te - [Stacking](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) and [block-formatting](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) contexts - [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values - [CSS shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - - [CSS Flexible Box Layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) + - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) - [Media queries](/en-US/docs/Web/CSS/CSS_media_queries) diff --git a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md index 8bb7f2dda3883b4..0b249c2e9923243 100644 --- a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -48,6 +48,6 @@ If including generated separators that will be exposed to AT, opt for creating t ## See also -- [CSS Flexible Box Layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) - [Providing a Breadcrumb Trail](https://www.w3.org/TR/WCAG20-TECHS/G65.html) - [Using the `aria-current` attribute](https://tink.uk/using-the-aria-current-attribute/) From 973642260b6c6335c0f245f5b0960dd2d24519b6 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 20:08:52 -0700 Subject: [PATCH 8/9] i missed a spot --- files/en-us/web/css/justify-content/index.md | 4 ++-- files/en-us/web/css/justify-items/index.md | 8 ++++---- files/en-us/web/css/justify-self/index.md | 2 +- files/en-us/web/css/order/index.md | 2 +- files/en-us/web/css/place-content/index.md | 2 +- files/en-us/web/css/place-items/index.md | 12 ++++++------ files/en-us/web/css/place-self/index.md | 2 +- files/en-us/web/css/repeat/index.md | 8 +++++++- files/en-us/web/css/row-gap/index.md | 5 +++-- 9 files changed, 26 insertions(+), 19 deletions(-) diff --git a/files/en-us/web/css/justify-content/index.md b/files/en-us/web/css/justify-content/index.md index 6760ff4ad30e3e4..220c12dfa102106 100644 --- a/files/en-us/web/css/justify-content/index.md +++ b/files/en-us/web/css/justify-content/index.md @@ -166,5 +166,5 @@ justifyContent.addEventListener("change", (evt) => { - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md index d8c251b2e23f7d8..777fd3dae9ca197 100644 --- a/files/en-us/web/css/justify-items/index.md +++ b/files/en-us/web/css/justify-items/index.md @@ -184,8 +184,8 @@ span { ## See also -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- The {{CSSxRef("place-items")}} shorthand property -- The {{CSSxRef("justify-self")}} property -- The {{CSSxRef("align-items")}} property +- {{CSSxRef("justify-self")}} +- {{CSSxRef("align-items")}} +- {{CSSxRef("place-items")}} shorthand diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md index 2d3f41fd3595789..bac288f3340207c 100644 --- a/files/en-us/web/css/justify-self/index.md +++ b/files/en-us/web/css/justify-self/index.md @@ -192,6 +192,6 @@ span { ## See also -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("justify-items")}} property diff --git a/files/en-us/web/css/order/index.md b/files/en-us/web/css/order/index.md index 05529fe9858ec35..fd91571a60041ef 100644 --- a/files/en-us/web/css/order/index.md +++ b/files/en-us/web/css/order/index.md @@ -109,4 +109,4 @@ main > aside { - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) -- CSS grid guide: _[CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)_ +- [CSS grid layout and accessibility](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility)\_ diff --git a/files/en-us/web/css/place-content/index.md b/files/en-us/web/css/place-content/index.md index 37d87aeb14b0199..82437abdf1f6e4d 100644 --- a/files/en-us/web/css/place-content/index.md +++ b/files/en-us/web/css/place-content/index.md @@ -237,7 +237,7 @@ div > div { - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{CSSxRef("align-content")}} property - The {{CSSxRef("justify-content")}} property diff --git a/files/en-us/web/css/place-items/index.md b/files/en-us/web/css/place-items/index.md index 75925a90477e49c..79cfb9f9fd62b50 100644 --- a/files/en-us/web/css/place-items/index.md +++ b/files/en-us/web/css/place-items/index.md @@ -306,11 +306,11 @@ values.addEventListener("change", (evt) => { ## See also +- {{CSSxRef("align-items")}} +- {{CSSxRef("align-self")}} +- {{CSSxRef("justify-items")}} +- {{CSSxRef("justify-self")}} - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- The {{CSSxRef("align-items")}} property -- The {{CSSxRef("align-self")}} property -- The {{CSSxRef("justify-items")}} property -- The {{CSSxRef("justify-self")}} property +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md index 223997607588ddb..3efac83b7dcb999 100644 --- a/files/en-us/web/css/place-self/index.md +++ b/files/en-us/web/css/place-self/index.md @@ -165,7 +165,7 @@ span { - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) -- CSS grid guide: _[Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) - [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - The {{cssxref("align-self")}} property - The {{cssxref("justify-self")}} property diff --git a/files/en-us/web/css/repeat/index.md b/files/en-us/web/css/repeat/index.md index 610656b362ef3be..33a9399614c71ba 100644 --- a/files/en-us/web/css/repeat/index.md +++ b/files/en-us/web/css/repeat/index.md @@ -168,6 +168,12 @@ There is a fourth form, ``, which is used to add line names to subg ## See also -- Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- {{cssxref("grid-template")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-flow")}} - [Line-based placement with CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement) - [Grid template areas: grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands) diff --git a/files/en-us/web/css/row-gap/index.md b/files/en-us/web/css/row-gap/index.md index 6501e56f955f0b1..8fbfd12df0e155a 100644 --- a/files/en-us/web/css/row-gap/index.md +++ b/files/en-us/web/css/row-gap/index.md @@ -132,5 +132,6 @@ row-gap: unset; ## See also -- Related CSS properties: {{CSSxRef("column-gap")}}, {{CSSxRef("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("column-gap")}} +- {{CSSxRef("gap")}} +- [Basic concepts of grid layout: gutters](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#gutters) From 234d30a82a15e63e88cf4687c3786a57350842fe Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 20 Jun 2024 20:17:16 -0700 Subject: [PATCH 9/9] i missed a spot --- files/en-us/web/css/justify-items/index.md | 4 ++-- files/en-us/web/css/justify-self/index.md | 4 ++-- .../css/layout_cookbook/breadcrumb_navigation/index.md | 2 +- files/en-us/web/css/layout_cookbook/card/index.md | 8 +++++--- .../web/css/layout_cookbook/center_an_element/index.md | 4 ++-- files/en-us/web/css/layout_cookbook/grid_wrapper/index.md | 2 +- files/en-us/web/css/place-content/index.md | 6 +++--- files/en-us/web/css/place-self/index.md | 6 +++--- 8 files changed, 19 insertions(+), 17 deletions(-) diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md index 777fd3dae9ca197..c28e062672a3aa1 100644 --- a/files/en-us/web/css/justify-items/index.md +++ b/files/en-us/web/css/justify-items/index.md @@ -184,8 +184,8 @@ span { ## See also -- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) - {{CSSxRef("justify-self")}} - {{CSSxRef("align-items")}} - {{CSSxRef("place-items")}} shorthand +- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md index bac288f3340207c..0f01e474cc324fe 100644 --- a/files/en-us/web/css/justify-self/index.md +++ b/files/en-us/web/css/justify-self/index.md @@ -192,6 +192,6 @@ span { ## See also +- {{CSSxRef("justify-items")}} - [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- The {{CSSxRef("justify-items")}} property +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md index 0b249c2e9923243..c73bbb3420bb148 100644 --- a/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -49,5 +49,5 @@ If including generated separators that will be exposed to AT, opt for creating t ## See also - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) -- [Providing a Breadcrumb Trail](https://www.w3.org/TR/WCAG20-TECHS/G65.html) +- [Providing a breadcrumb trail](https://www.w3.org/TR/WCAG20-TECHS/G65.html) - [Using the `aria-current` attribute](https://tink.uk/using-the-aria-current-attribute/) diff --git a/files/en-us/web/css/layout_cookbook/card/index.md b/files/en-us/web/css/layout_cookbook/card/index.md index 1a27fc4a2ad73d9..76b55f01c15ac20 100644 --- a/files/en-us/web/css/layout_cookbook/card/index.md +++ b/files/en-us/web/css/layout_cookbook/card/index.md @@ -69,10 +69,12 @@ We chose grid for the cards as, generally, you want cards to be lined up both ve ## Accessibility concerns -Depending on the content of your card, there may be things you could or should do to enhance accessibility. See [Inclusive Components: Card](https://inclusive-components.design/cards/) by Heydon Pickering, for a very detailed explanation of these issues. +Depending on the content of your card, there may be things you could or should do to enhance accessibility. See [Inclusive components: Card](https://inclusive-components.design/cards/) by Heydon Pickering, for a very detailed explanation of these issues. ## See also -- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} -- [Inclusive Components: Card](https://inclusive-components.design/cards/) +- {{Cssxref("grid-template-columns")}} +- {{Cssxref("grid-template-rows")}} +- {{Cssxref("gap")}} +- [Inclusive components: Card](https://inclusive-components.design/cards/) - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module diff --git a/files/en-us/web/css/layout_cookbook/center_an_element/index.md b/files/en-us/web/css/layout_cookbook/center_an_element/index.md index e1a0e964596c865..0e9f5204b659003 100644 --- a/files/en-us/web/css/layout_cookbook/center_an_element/index.md +++ b/files/en-us/web/css/layout_cookbook/center_an_element/index.md @@ -93,5 +93,5 @@ Instead of applying `place-items: center;` on the container, you can achieve the ## Resources on MDN -- [Box Alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) -- [CSS Box alignment guide](/en-US/docs/Web/CSS/CSS_box_alignment) +- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [CSS box alignment guide](/en-US/docs/Web/CSS/CSS_box_alignment) diff --git a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md index 91adb20219195f2..b18f27c5efeb222 100644 --- a/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/en-us/web/css/layout_cookbook/grid_wrapper/index.md @@ -45,5 +45,5 @@ Although CSS grid enables positioning items anywhere (within reason), ensuring t - {{Cssxref("grid-template-columns")}} property - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module -- [CSS grid: More flexibility with minmax()](https://css-irl.info/more-flexibility-with-minmax/) (2018) +- [CSS grid: More flexibility with `minmax()`](https://css-irl.info/more-flexibility-with-minmax/) (2018) - [Breaking out with CSS grid](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/) (2017) diff --git a/files/en-us/web/css/place-content/index.md b/files/en-us/web/css/place-content/index.md index 82437abdf1f6e4d..037d393d013844c 100644 --- a/files/en-us/web/css/place-content/index.md +++ b/files/en-us/web/css/place-content/index.md @@ -235,9 +235,9 @@ div > div { ## See also +- {{cssxref("align-content")}} +- {{cssxref("justify-content")}} - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- The {{CSSxRef("align-content")}} property -- The {{CSSxRef("justify-content")}} property +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md index 3efac83b7dcb999..5a027e5eac86a11 100644 --- a/files/en-us/web/css/place-self/index.md +++ b/files/en-us/web/css/place-self/index.md @@ -163,9 +163,9 @@ span { ## See also +- {{cssxref("align-self")}} +- {{cssxref("justify-self")}} - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout) -- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) -- The {{cssxref("align-self")}} property -- The {{cssxref("justify-self")}} property +- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module