diff --git a/files/en-us/glossary/cross_axis/index.md b/files/en-us/glossary/cross_axis/index.md index 796a45f83314b49..5d45da7df73b06e 100644 --- a/files/en-us/glossary/cross_axis/index.md +++ b/files/en-us/glossary/cross_axis/index.md @@ -35,10 +35,11 @@ Alignment of items on the cross axis is achieved with the `align-items` property ### Further reading -- CSS Flexbox Guide: - - [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) - - [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +CSS flexbox guides: + +- [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) +- [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) - [Glossary](/en-US/docs/Glossary) - {{Glossary("Flex")}} diff --git a/files/en-us/glossary/flex_container/index.md b/files/en-us/glossary/flex_container/index.md index ec6af13c65a89f9..03c49617017f3e8 100644 --- a/files/en-us/glossary/flex_container/index.md +++ b/files/en-us/glossary/flex_container/index.md @@ -24,7 +24,7 @@ A value of `flex` causes the element to become a block level flex container, and ### Further reading -- 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 Flexbox Guide: _[Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ -- Firefox Developer Tools > How to: _[CSS Flexbox Inspector: Examine Flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)_ +- [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) +- [Mastering wrapping of flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [CSS flexbox inspector: Examine flexbox layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) diff --git a/files/en-us/glossary/flex_item/index.md b/files/en-us/glossary/flex_item/index.md index 33afd0aa4491bb8..a8d939832a4992a 100644 --- a/files/en-us/glossary/flex_item/index.md +++ b/files/en-us/glossary/flex_item/index.md @@ -22,6 +22,6 @@ Continuous runs of text inside flex containers will also become flex items. ### Further reading -- 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 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) +- [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) +- [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/glossary/grid_areas/index.md b/files/en-us/glossary/grid_areas/index.md index 77c9a12f90c6897..dca9fb3f9af189c 100644 --- a/files/en-us/glossary/grid_areas/index.md +++ b/files/en-us/glossary/grid_areas/index.md @@ -75,7 +75,7 @@ In the example below I have a grid container with two grid items. I have named t ### Further reading -- CSS Grid Layout Guide: +- CSS grid layout Guide: - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Grid template areas](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas) -- [Definition of Grid Areas in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-area-concept) +- [Definition of grid areas in the CSS grid layout specification](https://drafts.csswg.org/css-grid/#grid-area-concept) diff --git a/files/en-us/glossary/grid_axis/index.md b/files/en-us/glossary/grid_axis/index.md index a50f98dfb74fc58..9a4de9819c49be8 100644 --- a/files/en-us/glossary/grid_axis/index.md +++ b/files/en-us/glossary/grid_axis/index.md @@ -6,22 +6,22 @@ page-type: glossary-definition {{GlossarySidebar}} -CSS Grid Layout is a two-dimensional layout method enabling the laying out of content in _rows_ and _columns_. Therefore in any grid we have two axes. The _block or column axis_, and the _inline or row axis_. +CSS grid layout is a two-dimensional layout method enabling the laying out of content in _rows_ and _columns_. Therefore in any grid we have two axes. The _block or column axis_, and the _inline or row axis_. It is along these axes that items can be aligned and justified using the properties defined in the [Box Alignment specification](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout). In CSS the _block or column axis_ is the axis used when laying out blocks of text. If you have two paragraphs and are working in a right to left, top to bottom language they lay out one below the other, on the block axis. -![Diagram showing the block axis in CSS Grid Layout.](7_block_axis.png) +![Diagram showing the block axis in CSS grid layout.](7_block_axis.png) -The _inline or row axis_ runs across the Block Axis and is the direction along which regular text flows. These are our rows in CSS Grid Layout. +The _inline or row axis_ runs across the Block Axis and is the direction along which regular text flows. These are our rows in CSS grid layout. -![Diagram showing the inline axis in CSS Grid Layout.](7_inline_axis.png) +![Diagram showing the inline axis in CSS grid layout.](7_inline_axis.png) The physical direction of these axes can change according to the [writing mode](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) of the document. ## See also -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ -- CSS Grid Layout Guide: _[Box alignment in Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)_ -- CSS Grid Layout Guide: _[Grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes)_ +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_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) diff --git a/files/en-us/glossary/grid_cell/index.md b/files/en-us/glossary/grid_cell/index.md index 09c966299455e81..ea55beece0ea73e 100644 --- a/files/en-us/glossary/grid_cell/index.md +++ b/files/en-us/glossary/grid_cell/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -In a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), a **grid cell** is the smallest unit you can have on your CSS grid. It is the space between four intersecting {{glossary("grid lines")}} and conceptually much like a table cell. +In a [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), a **grid cell** is the smallest unit you can have on your CSS grid. It is the space between four intersecting {{glossary("grid lines")}} and conceptually much like a table cell. ![Diagram showing an individual cell on the grid.](1_grid_cell.png) @@ -67,5 +67,5 @@ In the example we have created a three column track grid. The five items are pla ### Further reading -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ -- [Definition of Grid Cells in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) +- [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Definition of grid cells in the CSS grid layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) diff --git a/files/en-us/glossary/grid_column/index.md b/files/en-us/glossary/grid_column/index.md index 3cfa1dc16996f02..012e7a62f7dcfc7 100644 --- a/files/en-us/glossary/grid_column/index.md +++ b/files/en-us/glossary/grid_column/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -A **grid column** is a vertical track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), and is the space between two vertical grid lines. It is defined by the {{cssxref("grid-template-columns")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. +A **grid column** is a vertical track in a [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), and is the space between two vertical grid lines. It is defined by the {{cssxref("grid-template-columns")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. In addition, columns may be created in the _implicit grid_ when items are placed outside of columns created in the _explicit grid_. These columns will be auto-sized by default, or can have a size specified with the {{cssxref("grid-auto-columns")}} property. -When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis down which columns run is known as the _block, or column, axis_. +When working with alignment in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis down which columns run is known as the _block, or column, axis_. ## See also @@ -23,4 +23,4 @@ When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_la ### Further reading -- CSS Grid Layout Guide: _[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) diff --git a/files/en-us/glossary/grid_container/index.md b/files/en-us/glossary/grid_container/index.md index 3d8dea2f190ee3b..f1c3ce11072d124 100644 --- a/files/en-us/glossary/grid_container/index.md +++ b/files/en-us/glossary/grid_container/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), and any direct children of this element become grid items. +Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), and any direct children of this element become grid items. When an element becomes a grid container it establishes a **grid formatting context**. The direct children can now lay themselves out on any explicit grid defined using {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}, or on the _implicit grid_ created when an item is placed outside of the _explicit grid_. @@ -23,4 +23,4 @@ When an element becomes a grid container it establishes a **grid formatting cont ### Further reading -- CSS Grid Layout guide: _[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) diff --git a/files/en-us/glossary/grid_lines/index.md b/files/en-us/glossary/grid_lines/index.md index 5c4c668965891fc..f6f7b56c58ad0d2 100644 --- a/files/en-us/glossary/grid_lines/index.md +++ b/files/en-us/glossary/grid_lines/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Grid lines** are created anytime you use a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). +**Grid lines** are created anytime you use a [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). ## Example @@ -174,9 +174,9 @@ The lines created in the _explicit grid_ can be named, by adding the name in squ ### Further reading -- CSS Grid Layout Guide: +- CSS grid layout guides: - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - - [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) - [Layout using named grid lines](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines) - - [CSS Grids, Logical Values and Writing Modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) -- [Definition of Grid Lines in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-line-concept) + - [CSS grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes) +- [Definition of grid lines in the CSS grid layout specification](https://drafts.csswg.org/css-grid/#grid-line-concept) diff --git a/files/en-us/glossary/grid_row/index.md b/files/en-us/glossary/grid_row/index.md index 263c10e882b529f..725b0fe7ea8f556 100644 --- a/files/en-us/glossary/grid_row/index.md +++ b/files/en-us/glossary/grid_row/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -A **grid row** is a horizontal track in a [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), that is the space between two horizontal grid lines. It is defined by the {{cssxref("grid-template-rows")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. +A **grid row** is a horizontal track in a [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), that is the space between two horizontal grid lines. It is defined by the {{cssxref("grid-template-rows")}} property or in the shorthand {{cssxref("grid")}} or {{cssxref("grid-template")}} properties. In addition, rows may be created in the _implicit grid_ when items are placed outside of rows created in the _explicit grid_. These rows will be auto sized by default, or can have a size specified with the {{cssxref("grid-auto-rows")}} property. -When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis along which rows run is known as the _inline, or row, axis_. +When working with alignment in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), the axis along which rows run is known as the _inline, or row, axis_. ## See also @@ -23,4 +23,4 @@ When working with alignment in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_la ### Further reading -- CSS Grid Layout Guide: _[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) diff --git a/files/en-us/glossary/grid_tracks/index.md b/files/en-us/glossary/grid_tracks/index.md index 365c3f3ae7c2dfc..4afa27d60e09ea2 100644 --- a/files/en-us/glossary/grid_tracks/index.md +++ b/files/en-us/glossary/grid_tracks/index.md @@ -66,7 +66,7 @@ Tracks created in the implicit grid are auto-sized by default, however you can d ## See also - [Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) -- [Definition of Grid Tracks in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) +- [Definition of grid tracks in the CSS grid layout specification](https://drafts.csswg.org/css-grid/#grid-track-concept) - Property reference - {{cssxref("grid-template-columns")}} diff --git a/files/en-us/glossary/gutters/index.md b/files/en-us/glossary/gutters/index.md index 30a9c7fee9cd7d8..22cdc32d0e56d58 100644 --- a/files/en-us/glossary/gutters/index.md +++ b/files/en-us/glossary/gutters/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Gutters** or _alleys_ are spacing between content {{glossary("grid_tracks", "tracks")}}. These can be created in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties. +**Gutters** or _alleys_ are spacing between content {{glossary("grid_tracks", "tracks")}}. These can be created in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties. ## Example @@ -60,11 +60,11 @@ The `row-gap` and `column-gap` properties are not the only things that can cause ## See also -- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - Property reference - {{cssxref("column-gap")}} - {{cssxref("row-gap")}} - {{cssxref("gap")}} -- [Definition of gutters](https://drafts.csswg.org/css-grid/#gutters) in the CSS Grid Layout specification +- [Definition of gutters](https://drafts.csswg.org/css-grid/#gutters) in the CSS grid layout specification diff --git a/files/en-us/glossary/main_axis/index.md b/files/en-us/glossary/main_axis/index.md index 383ce0943a89771..2878f8566c3a137 100644 --- a/files/en-us/glossary/main_axis/index.md +++ b/files/en-us/glossary/main_axis/index.md @@ -36,7 +36,7 @@ On the main axis you can control the sizing of flex items by adding any availabl ### Further reading -- CSS Flexbox Guide: - - [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- CSS flexbox guides: + - [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) diff --git a/files/en-us/glossary/table_grid_box/index.md b/files/en-us/glossary/table_grid_box/index.md index 6281f1214bc21bc..14e406c672755a9 100644 --- a/files/en-us/glossary/table_grid_box/index.md +++ b/files/en-us/glossary/table_grid_box/index.md @@ -1,9 +1,9 @@ --- -title: Table Grid Box +title: Table grid box slug: Glossary/Table_Grid_Box page-type: glossary-definition --- {{GlossarySidebar}} -The **Table Grid Box** is a block level box which contains all of the table internal boxes, excluding the caption. The box which includes the caption is referred to as the [Table Wrapper Box](/en-US/docs/Glossary/Table_Wrapper_Box). +The **table grid box** is a block level box which contains all of the table internal boxes, excluding the caption. The box which includes the caption is referred to as the [table wrapper box](/en-US/docs/Glossary/Table_Wrapper_Box).