From 293f48343cdc35c06a6e37f909a8709b85c56a12 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 8 Jan 2025 15:27:54 -0800
Subject: [PATCH 01/10] CSS module: box alignment

---
 .../glossary/baseline/typography/index.md     |   2 +-
 .../mozilla/firefox/releases/61/index.md      |   2 +-
 .../align-container-subjects.png              | Bin
 .../css_box_alignment/box_alignment/index.md  | 292 ++++++++++++++++
 .../justify-content-space-between.png         | Bin
 .../justify-content-start.png                 | Bin
 .../{ => box_alignment}/two-axes.png          | Bin
 .../writing-mode-start.png                    | Bin
 .../index.md                                  |  22 +-
 .../box_alignment_in_flexbox/index.md         |  36 +-
 .../box_alignment_in_grid_layout/index.md     |  53 ++-
 .../index.md                                  |  30 +-
 .../en-us/web/css/css_box_alignment/index.md  | 323 +++---------------
 .../svg/attribute/alignment-baseline/index.md |   2 +-
 14 files changed, 385 insertions(+), 377 deletions(-)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/align-container-subjects.png (100%)
 create mode 100644 files/en-us/web/css/css_box_alignment/box_alignment/index.md
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/justify-content-space-between.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/justify-content-start.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/two-axes.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/writing-mode-start.png (100%)

diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md
index f7387b5bae6749b..45199bd983d17a1 100644
--- a/files/en-us/glossary/baseline/typography/index.md
+++ b/files/en-us/glossary/baseline/typography/index.md
@@ -14,6 +14,6 @@ Other writing systems have different baselines. For example, Tibetan and similar
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment)
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#types_of_alignment)
 - [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
 - [Baseline (Typography)](<https://en.wikipedia.org/wiki/Baseline_(typography)>) on Wikipedia
diff --git a/files/en-us/mozilla/firefox/releases/61/index.md b/files/en-us/mozilla/firefox/releases/61/index.md
index 70885cc7f3ca58e..7fcddb57567119a 100644
--- a/files/en-us/mozilla/firefox/releases/61/index.md
+++ b/files/en-us/mozilla/firefox/releases/61/index.md
@@ -36,7 +36,7 @@ _No changes._
 
 - CSS parsing has been parallelized ([Firefox bug 1346988](https://bugzil.la/1346988)).
 - Support for {{cssxref("font-variation-settings")}} and {{cssxref("font-optical-sizing")}} has been enabled by default ([Firefox bug 1447163](https://bugzil.la/1447163)).
-- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
+- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
 - The {{cssxref("flex-basis")}} `content` value is now supported ([Firefox bug 1105111](https://bugzil.la/1105111)).
 - Percentage values of {{cssxref("column-gap")}} are now supported in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) ([Firefox bug 1398537](https://bugzil.la/1398537)).
 - The CSS {{cssxref(":host")}} pseudo-class is now supported; this selects a custom element from inside its shadow DOM ([Firefox bug 992245](https://bugzil.la/992245)).
diff --git a/files/en-us/web/css/css_box_alignment/align-container-subjects.png b/files/en-us/web/css/css_box_alignment/box_alignment/align-container-subjects.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/align-container-subjects.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/align-container-subjects.png
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
new file mode 100644
index 000000000000000..43d6409fcbc5f91
--- /dev/null
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -0,0 +1,292 @@
+---
+title: CSS box alignment
+slug: Web/CSS/CSS_box_alignment/box_alignment
+page-type: guide
+---
+
+{{CSSRef}}
+
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models. The module aims to create a consistent method of alignment across all of CSS. The CSS box alignment properties provide full horizontal and vertical alignment capabilities. This guide details the general concepts found in this module.
+
+This guide provides an overview. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text module](/en-US/docs/Web/CSS/CSS_text) and [CSS inline module](/en-US/docs/Web/CSS/CSS_inline_layout).
+
+## Key concepts and terminology
+
+The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.
+
+### Relationship to writing modes
+
+Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
+
+### Two dimensions of alignment
+
+When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.
+
+![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](two-axes.png)
+
+When aligning items on the inline axis you will use the properties which begin with `justify-`:
+
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("justify-content")}}
+
+When aligning items on the block axis you will use the properties that begin `align-`:
+
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("align-content")}}
+
+Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
+
+### The alignment subject
+
+The **{{Glossary("alignment subject")}}** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.
+
+### The alignment container
+
+The **{{Glossary("alignment container")}}** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.
+
+The below image shows an alignment container with two alignment subjects inside.
+
+![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](align-container-subjects.png)
+
+### Fallback alignment
+
+If you set an alignment that cannot be fulfilled, then the **{{Glossary("fallback alignment")}}** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.
+
+## Types of alignment
+
+There are three different types of alignment that the specification details; these use keyword values.
+
+- [Positional alignment](#positional-alignment)
+- [Baseline alignment](#baseline-alignment)
+- [Distributed alignment](#distributed-alignment)
+
+### Positional alignment
+
+**Positional alignment** is the position of an alignment subject with relation to its alignment container. The positional aligment keyword values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
+
+- `center`
+- `start`
+- `end`
+- `self-start`
+- `self-end`
+- `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.
+
+Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode.
+
+![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](writing-mode-start.png)
+
+### Baseline alignment
+
+**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
+
+- `baseline`
+- `first baseline`
+- `last baseline`
+
+Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.
+
+Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.
+
+### Distributed alignment
+
+**Distributed alignment** defines alignment as a distribution of space among alignment subjects. The distributed alignment keywords are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
+
+- `stretch`
+- `space-between`
+- `space-around`
+- `space-evenly`
+
+For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.
+
+![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](justify-content-start.png)
+
+If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.
+
+![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](justify-content-space-between.png)
+
+There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.
+
+### Basic examples
+
+The following examples demonstrate how some of the box alignment properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout).
+
+#### CSS grid layout alignment example
+
+In this grid layout example, 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`.
+
+```html live-sample___grid-align-items
+<div class="box">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three <br />has <br />extra <br />text</div>
+  <div>Four</div>
+  <div>Five</div>
+  <div>Six</div>
+</div>
+```
+
+```css hidden live-sample___grid-align-items
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___grid-align-items
+.box {
+  display: grid;
+  grid-template-columns: 120px 120px 120px;
+  align-items: start;
+  justify-content: space-between;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("grid-align-items", "", "200px")}}
+
+#### Flexbox Alignment Example
+
+In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
+
+```html live-sample___flex-align-items
+<div class="box">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three <br />has <br />extra <br />text</div>
+</div>
+```
+
+```css hidden live-sample___flex-align-items
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___flex-align-items
+.box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("flex-align-items")}}
+
+## Overflow alignment
+
+The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
+
+If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.
+
+## Gaps between boxes
+
+The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.
+
+The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:
+
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.
+
+```html live-sample___grid-gap
+<div class="box">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+  <div>Six</div>
+</div>
+```
+
+```css hidden live-sample___grid-gap
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___grid-gap
+.box {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px 2em;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("grid-gap")}}
+
+Early grid implementation included `gap` properties prefixed with `grid-`. All browsers support the unprefixed properties, though you may see the following properties in a code-base: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions are aliases of the unprefixed ones.
+
+Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
+
+## Box-alignment by layout type
+
+As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following guides 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 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)
+
+## See also
+
+- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
+- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [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 layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
+- [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_box_alignment/justify-content-space-between.png b/files/en-us/web/css/css_box_alignment/box_alignment/justify-content-space-between.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/justify-content-space-between.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/justify-content-space-between.png
diff --git a/files/en-us/web/css/css_box_alignment/justify-content-start.png b/files/en-us/web/css/css_box_alignment/box_alignment/justify-content-start.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/justify-content-start.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/justify-content-start.png
diff --git a/files/en-us/web/css/css_box_alignment/two-axes.png b/files/en-us/web/css/css_box_alignment/box_alignment/two-axes.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/two-axes.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/two-axes.png
diff --git a/files/en-us/web/css/css_box_alignment/writing-mode-start.png b/files/en-us/web/css/css_box_alignment/box_alignment/writing-mode-start.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/writing-mode-start.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/writing-mode-start.png
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 750ee20c8c120bc..8f12ffa6edb7394 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 page-type: guide
 ---
 
-The [box alignment specification](/en-US/docs/Web/CSS/CSS_box_alignment) details how alignment works in various layout methods. In this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this page aims to detail things which are specific to block 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.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this guide aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## align-content and justify-content
 
@@ -75,19 +75,9 @@ For many use cases, turning the block container into a flex item will give you t
 
 {{EmbedLiveSample("intro", "", "320px")}}
 
-## Reference
+## See also
 
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-
-### Glossary Entries
-
-- [Alignment subject](/en-US/docs/Glossary/Alignment_Subject)
-- [Alignment container](/en-US/docs/Glossary/Alignment_Container)
-- [Fallback alignment](/en-US/docs/Glossary/Fallback_Alignment)
-
-{{CSSRef}}
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [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)
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 f624a620217c87d..6437905c3f8cee9 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,11 +6,11 @@ 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) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
 
 ## Basic example
 
-In this example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
+In this [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
 
 ```html live-sample___flex-align-items
 <div class="box">
@@ -51,7 +51,7 @@ Flexbox respects the writing mode of the document, therefore if you are working
 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`
+- The cross axis = runs across the main axis = alignment via {{cssxref("align-content")}}, {{cssxref("align-self")}}/{{cssxref("align-items")}}
 
 ### Main Axis Alignment
 
@@ -65,7 +65,7 @@ However, in flexbox you can change the main axis by setting `flex-direction` to
 
 ### 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.
+On the main axis, Flexbox deals with the flex items, 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.
 
@@ -118,7 +118,7 @@ By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items
 
 On the main axis, the `column-gap` property creates fixed size gaps between adjacent items.
 
-On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore `flex-wrap` must also be set to `wrap` for this to have any effect.
+On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore {{cssxref("flex-wrap")}} must also be set to `wrap` for this to have any effect.
 
 ```html live-sample___gap
 <div class="box">
@@ -157,26 +157,12 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l
 
 {{EmbedLiveSample("gap")}}
 
-## Reference
-
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("align-self")}}
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
-
-### Glossary Entries
+## See also
 
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [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)
+- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
 - {{Glossary("Cross axis")}}
 - {{Glossary("Main axis")}}
-
-## Guides
-
-- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
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 b18ef81173e3d18..fe54ba7ce1c7179 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
@@ -6,13 +6,13 @@ 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 [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
+The [CSS box alignment module](/en-US/docs/Web/CSS/CSS_box_alignment) 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 guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
 
 ## Basic 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 `justify-content`. On the block (cross) axis the alignment of the items inside their grid areas is controlled with `align-items`. The first item overrides the `align-items` value set on the group by setting `align-self` to `center`.
+In this example using [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout), there is extra space in the {{glossary("grid container")}} after laying out the fixed width tracks on the inline {{glossary("main axis")}}. This space is distributed using {{cssxref("justify-content")}}. On the block {{glossary("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%', 500)}}
 
@@ -20,13 +20,13 @@ In this example using grid layout, there is extra space in the grid container af
 
 As a two-dimensional layout method, when working with grid layout we always have two axes on which to align our items. We have access to all of the box alignment properties to help us achieve this.
 
-The inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. Therefore, in a horizontal language such as English or Arabic the inline direction runs horizontally. Should you be in a vertical writing mode the inline axis will run vertically.
+The inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. Therefore, in a horizontal language such as English or Arabic, the inline direction runs horizontally. Should you be in a vertical writing mode, the inline axis will run vertically.
 
 ![Inline axes are horizontal.](inline_axis.png)
 
-To align things on the inline axis you use the properties that start with `justify-`, {{cssxref("justify-content")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}}.
+To align things on the inline axis you use the properties that start with `justify-`: {{cssxref("justify-content")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}}.
 
-The block axis crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in English are displayed one below the other vertically. This, therefore is the block dimension.
+The block axis crosses the inline axis in the direction that blocks are displayed down the page — for example, paragraphs in English are displayed one below the other vertically. This is the block dimension.
 
 To align things on the block axis you use the properties that start with `align-`, {{cssxref("align-content")}}, {{cssxref("align-items")}} and {{cssxref("align-self")}}.
 
@@ -34,6 +34,8 @@ To align things on the block axis you use the properties that start with `align-
 
 ## Self alignment
 
+These properties deal with aligning the item inside the grid area it is placed into:
+
 - {{cssxref("justify-self")}}
 - {{cssxref("align-self")}}
 - {{cssxref("place-self")}}
@@ -41,50 +43,35 @@ 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.
+The "items" properties, `align-items` and `justify-items`, are applied to the grid container and set the "self" properties, `align-self` and `justify-self`, 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.
+The initial value for `align-items` and `justify-items` is `stretch`, and the initial value for `align-self` and `justify-self` is `auto`, 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.
 
 ## Content alignment
 
+These properties deal with aligning the tracks of the grid when there is extra space to distribute:
+
 - {{cssxref("justify-content")}}
 - {{cssxref("align-content")}}
 - {{cssxref("place-content")}}
 
-These properties deal with aligning the tracks of the grid when there is extra space to distribute. This scenario will occur if the tracks that you have defined total less than the total width of the grid container.
+This scenario will occur if the tracks that you have defined total less than the total width of the grid container.
 
 ## Gap and legacy grid-gap properties
 
-- {{cssxref("row-gap")}}
-- {{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 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.
-
-## Reference
-
-### CSS Properties
+These properties define the spacing between grid items within a grid container:
 
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-- {{cssxref("place-self")}}
 - {{cssxref("row-gap")}}
 - {{cssxref("column-gap")}}
 - {{cssxref("gap")}}
 
-### Glossary Entries
+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 aliased 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.
 
-- [Cross axis](/en-US/docs/Glossary/Cross_Axis)
-- [Main axis](/en-US/docs/Glossary/Main_Axis)
+## See also
 
-## Guides
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [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)
 
 - [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 6cc200127aaad36..3e1f2ab21225cfd 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -6,33 +6,23 @@ 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 [multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this page aims to detail things which are specific to Multi-column 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.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things which are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
 
-In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below.
-
-> [!NOTE]
-> Multi-column layout predates the box alignment specification. And the properties listed here, while specified for Multicol, may not be supported in browsers.
+In [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts), the {{glossary("alignment container")}} is the content box of the multicol container. The {{glossary("alignment subject")}} is the column box. The properties which apply to multi-column layouts are detailed below.
 
 ## align-content and justify-content
 
-The {{cssxref("align-content")}} property applies to the block axis and {{cssxref("justify-content")}} to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the {{cssxref("column-gap")}} property.
+The {{cssxref("align-content")}} property applies to the block axis and {{cssxref("justify-content")}} to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the {{cssxref("column-gap")}} (or {{cssxref("gap")}} shorthand) property.
 
-Using a value of `justify-content` other than `normal` or `stretch` will cause column boxes to display at the {{cssxref("column-width")}} specified on the multicol container, and the remaining space distributed according to the value of justify-content.
+Using a value of `justify-content` other than `normal` or `stretch` will cause column boxes to display at the {{cssxref("column-width")}} specified on the multicol container, and the remaining space distributed according to the value of `justify-content`.
 
 ## column-gap
 
-The {{cssxref("column-gap")}} property was specified in earlier versions of the multiple-column layout specification, and has now been unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of column-gap as 0 multicol treats it as 1em, as in general you would not want to have no gap between columns.
-
-## Reference
-
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("column-gap")}}
+The {{cssxref("column-gap")}} property was originally specified the multiple-column layout specification, and was later unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of `column-gap` as `0`, multicol treats it as `1em`, as your generally don't want to have no gap between columns.
 
-### Glossary Entries
+## See also
 
-- [Alignment subject](/en-US/docs/Glossary/Alignment_Subject)
-- [Alignment container](/en-US/docs/Glossary/Alignment_Container)
-- [Fallback alignment](/en-US/docs/Glossary/Fallback_Alignment)
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [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 for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
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 136ca1e1e6021c3..0c5a028cd58a0d1 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -7,319 +7,82 @@ spec-urls: https://drafts.csswg.org/css-align/
 
 {{CSSRef}}
 
-The **CSS box alignment** module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. The module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.
-
-> [!NOTE]
-> The documentation for each layout method will detail how Box Alignment is applied there.
-
-## Older alignment methods
+The **CSS box alignment** module specifies CSS features that relate to the alignment of boxes within their containers across all CSS. It defines the alignment of the various CSS box layout models, including block layout, table layout, flex layout, and grid layout, creating a consistent method of alignment across all of CSS. This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.
 
-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.
-
-## Basic examples
-
-The following examples demonstrate how some of the Box Alignment Properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout).
-
-### 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`.
-
-```html live-sample___grid-align-items
-<div class="box">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three <br />has <br />extra <br />text</div>
-  <div>Four</div>
-  <div>Five</div>
-  <div>Six</div>
-</div>
-```
-
-```css hidden live-sample___grid-align-items
-body {
-  font: 1.2em sans-serif;
-}
-
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
-
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
-
-```css live-sample___grid-align-items
-.box {
-  display: grid;
-  grid-template-columns: 120px 120px 120px;
-  align-items: start;
-  justify-content: space-between;
-}
-
-.box :first-child {
-  align-self: center;
-}
-```
-
-{{EmbedLiveSample("grid-align-items", "", "200px")}}
-
-### Flexbox Alignment Example
-
-In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
-
-```html live-sample___flex-align-items
-<div class="box">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three <br />has <br />extra <br />text</div>
-</div>
-```
-
-```css hidden live-sample___flex-align-items
-body {
-  font: 1.2em sans-serif;
-}
-
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
-
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
-
-```css live-sample___flex-align-items
-.box {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.box :first-child {
-  align-self: center;
-}
-```
-
-{{EmbedLiveSample("flex-align-items")}}
-
-## Key concepts and terminology
-
-The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.
-
-### Relationship to writing modes
+The module details alignment terminology, enabling alignment properties to be used in multiple layout modules, rather than limited to a particular layout method.
 
 Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
 
-### Two dimensions of alignment
-
-When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.
-
-![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](two-axes.png)
-
-When aligning items on the inline axis you will use the properties which begin with `justify-`:
+The alignment of text and inline-level content is defined in [CSS text module](/en-US/docs/Web/CSS/CSS_text) and [CSS inline module](/en-US/docs/Web/CSS/CSS_inline_layout), respectively.
 
-- {{cssxref("justify-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("justify-content")}}
+## Reference
 
-When aligning items on the block axis you will use the properties that begin `align-`:
+### CSS Properties
 
+- {{cssxref("align-content")}}
 - {{cssxref("align-items")}}
 - {{cssxref("align-self")}}
-- {{cssxref("align-content")}}
-
-Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
-
-### The alignment subject
-
-The **alignment subject** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.
-
-### The alignment container
-
-The **alignment container** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.
-
-The below image shows an alignment container with two alignment subjects inside.
-
-![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](align-container-subjects.png)
-
-### Fallback alignment
-
-If you set an alignment that cannot be fulfilled, then the **fallback alignment** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.
-
-## Types of alignment
-
-There are three different types of alignment that the specification details; these use keyword values.
-
-- **Positional alignment**: specifying the position of an alignment subject with relation to its alignment container.
-- **Baseline alignment**: These keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context.
-- **Distributed alignment**: These keywords define alignment as a distribution of space among alignment subjects.
-
-### Positional alignment keyword values
-
-The following values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
-
-- `center`
-- `start`
-- `end`
-- `self-start`
-- `self-end`
-- `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.
-
-Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode.
-
-![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](writing-mode-start.png)
-
-### Baseline alignment
-
-The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
-
-- `baseline`
-- `first baseline`
-- `last baseline`
-
-Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.
-
-Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.
-
-### Distributed alignment
-
-The **distributed alignment keywords** are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
-
-- `stretch`
-- `space-between`
-- `space-around`
-- `space-evenly`
-
-For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.
-
-![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](justify-content-start.png)
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("place-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
 
-If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.
+### Data types
 
-![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](justify-content-space-between.png)
+- {{cssxref("baseline-position")}}
+- {{cssxref("content-distribution")}} - space-between | space-around | space-evenly | stretch
+- {{cssxref("content-position")}} center | start | end | flex-start | flex-end
+- {{cssxref("overflow-position")}} unsafe | safe
+- {{cssxref("self-position")}} center | start | end | self-start | self-end |
+  flex-start | flex-end
 
-There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.
+### Terms and definitions
 
-## Overflow alignment
+- {{Glossary("Alignment container")}}
+- {{Glossary("Alignment subject")}}
+- [Baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)
+- [Distributed alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#distributed_alignment)
+- {{Glossary("Fallback alignment")}}
+- [Positional alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#positional_alignment)
 
-The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
+## Guides
 
-If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.
+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:
 
-## Gaps between boxes
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 
-The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.
+  - : Overview of the general concepts found in the CSS box alignment module.
 
-The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
 
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
+  - : How box alignment works in the context of flexbox.
 
-In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.
-
-```html live-sample___grid-gap
-<div class="box">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-  <div>Six</div>
-</div>
-```
-
-```css hidden live-sample___grid-gap
-body {
-  font: 1.2em sans-serif;
-}
-
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
-
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
-
-```css live-sample___grid-gap
-.box {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 10px 2em;
-}
-
-.box :first-child {
-  align-self: center;
-}
-```
-
-{{EmbedLiveSample("grid-gap")}}
-
-> [!NOTE]
-> The early grid implementation included `-gap` properties prefixed with `grid-`. All browsers now support the unprefixed properties, though you may see the following legacy properties in examples and tutorials: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions will be maintained as an alias of the unprefixed ones.
-
-Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
-
-## Pages detailing individual alignment properties
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
 
-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:
+  - : How box alignment works in the context of 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)
 
-## Reference
+  - : How box alignment works in the context of multi-column layout.
 
-### CSS Properties
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
 
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-- {{cssxref("place-self")}}
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
+  - : How box alignment works in the context of block layout, including floated, positioned, and table elements.
 
-### Glossary Entries
+## Related concepts
 
 - {{Glossary("Cross axis")}}
 - {{Glossary("Main axis")}}
-- {{Glossary("Alignment container")}}
-- {{Glossary("Alignment subject")}}
-- {{Glossary("Fallback alignment")}}
-
-## 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)
+
 - [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
 
 ## Specifications
diff --git a/files/en-us/web/svg/attribute/alignment-baseline/index.md b/files/en-us/web/svg/attribute/alignment-baseline/index.md
index a9b5818ce5b8b23..98610b6fc6cc32a 100644
--- a/files/en-us/web/svg/attribute/alignment-baseline/index.md
+++ b/files/en-us/web/svg/attribute/alignment-baseline/index.md
@@ -145,4 +145,4 @@ For object alignment in other elements (such as {{SVGElement("text")}}), see {{S
 
 ## See also
 
-- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment#baseline_alignment)
+- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)

From e9c365a37553f4995b21755111154ac1bfd5f845 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 8 Jan 2025 16:43:33 -0800
Subject: [PATCH 02/10] CSS module: box alignment

---
 .../en-us/web/css/css_box_alignment/index.md  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

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 0c5a028cd58a0d1..d05f4a304740e40 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -35,11 +35,10 @@ The alignment of text and inline-level content is defined in [CSS text module](/
 ### Data types
 
 - {{cssxref("baseline-position")}}
-- {{cssxref("content-distribution")}} - space-between | space-around | space-evenly | stretch
-- {{cssxref("content-position")}} center | start | end | flex-start | flex-end
-- {{cssxref("overflow-position")}} unsafe | safe
-- {{cssxref("self-position")}} center | start | end | self-start | self-end |
-  flex-start | flex-end
+- {{cssxref("content-distribution")}}
+- {{cssxref("content-position")}}
+- {{cssxref("overflow-position")}}
+- {{cssxref("self-position")}}
 
 ### Terms and definitions
 
@@ -76,21 +75,24 @@ As the CSS box alignment properties are implemented differently depending on the
 
 ## Related concepts
 
+- {{cssxref("alignment-baseline")}}
+- {{cssxref("grid-column-gap")}}
+- {{cssxref("grid-gap")}}
+- {{cssxref("grid-row-gap")}}
+- {{cssxref("scroll-snap-align")}}
+- SVG {{SVGAttr("dominant-baseline")}} attribute
 - {{Glossary("Cross axis")}}
 - {{Glossary("Main axis")}}
 
-- [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)
-
 ## Specifications
 
 {{Specifications}}
 
 ## See also
 
+- [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 display](/en-US/docs/Web/CSS/CSS_display) module
 - [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
 - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module

From 0f3889bb2bc99053bb95345034628df1464073f1 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 8 Jan 2025 20:08:30 -0800
Subject: [PATCH 03/10] related

---
 files/en-us/web/css/css_box_alignment/index.md | 1 +
 1 file changed, 1 insertion(+)

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 d05f4a304740e40..4c7750d26320726 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -76,6 +76,7 @@ As the CSS box alignment properties are implemented differently depending on the
 ## Related concepts
 
 - {{cssxref("alignment-baseline")}}
+- {{cssxref("dominant-baseline")}}
 - {{cssxref("grid-column-gap")}}
 - {{cssxref("grid-gap")}}
 - {{cssxref("grid-row-gap")}}

From ad1748f7477c806d640415e4e6adcbc07d01818c Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Tue, 14 Jan 2025 11:48:37 -0800
Subject: [PATCH 04/10] Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 .../css_box_alignment/box_alignment/index.md  | 28 +++++++++----------
 .../box_alignment_in_flexbox/index.md         |  4 +--
 .../box_alignment_in_grid_layout/index.md     |  8 +++---
 .../index.md                                  |  4 +--
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
index 43d6409fcbc5f91..aa3204d2ad966c2 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -1,5 +1,5 @@
 ---
-title: CSS box alignment
+title: CSS box alignment overview
 slug: Web/CSS/CSS_box_alignment/box_alignment
 page-type: guide
 ---
@@ -8,7 +8,7 @@ page-type: guide
 
 The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models. The module aims to create a consistent method of alignment across all of CSS. The CSS box alignment properties provide full horizontal and vertical alignment capabilities. This guide details the general concepts found in this module.
 
-This guide provides an overview. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text module](/en-US/docs/Web/CSS/CSS_text) and [CSS inline module](/en-US/docs/Web/CSS/CSS_inline_layout).
+This guide provides an overview. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text](/en-US/docs/Web/CSS/CSS_text) and [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) modules.
 
 ## Key concepts and terminology
 
@@ -20,17 +20,17 @@ Alignment is linked to writing modes in that when we align an item we do not con
 
 ### Two dimensions of alignment
 
-When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.
+When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used. For English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out; it runs across the Inline axis.
 
 ![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](two-axes.png)
 
-When aligning items on the inline axis you will use the properties which begin with `justify-`:
+When aligning items on the inline axis you will use the properties that begin with `justify-`:
 
 - {{cssxref("justify-items")}}
 - {{cssxref("justify-self")}}
 - {{cssxref("justify-content")}}
 
-When aligning items on the block axis you will use the properties that begin `align-`:
+When aligning items on the block axis you will use the properties that begin with `align-`:
 
 - {{cssxref("align-items")}}
 - {{cssxref("align-self")}}
@@ -78,7 +78,7 @@ There are three different types of alignment that the specification details; the
 
 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-hand side of the page. 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.
 
@@ -86,7 +86,7 @@ Both of these examples have `justify-content: start`, however the location of st
 
 ### Baseline alignment
 
-**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
+**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and self-alignment with `justify-self` and `align-self`.
 
 - `baseline`
 - `first baseline`
@@ -94,7 +94,7 @@ Both of these examples have `justify-content: start`, however the location of st
 
 Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.
 
-Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.
+Baseline self-alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self-alignment is done for singular boxes using `justify-self` or `align-self`, or for groups of boxes using `justify-items` and `align-items`.
 
 ### Distributed alignment
 
@@ -105,7 +105,7 @@ Baseline self alignment shifts the boxes to align by baseline by adding a margin
 - `space-around`
 - `space-evenly`
 
-For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.
+For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top-to-bottom writing mode (with a language such as English), with `flex-direction` set to `row`, the items start on the far left, and any available space after displaying the items is placed after them.
 
 ![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](justify-content-start.png)
 
@@ -113,7 +113,7 @@ If you set `justify-content: space-between` on the flex container, the available
 
 ![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](justify-content-space-between.png)
 
-There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.
+For these keywords to take effect, space is required along the dimension in which you wish to align the items. With no space, there is nothing to distribute.
 
 ### Basic examples
 
@@ -121,7 +121,7 @@ The following examples demonstrate how some of the box alignment properties are
 
 #### CSS grid layout alignment example
 
-In this grid layout example, 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 grid layout example, 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`.
 
 ```html live-sample___grid-align-items
 <div class="box">
@@ -168,7 +168,7 @@ body {
 
 #### Flexbox Alignment Example
 
-In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
+In this example, three flex items are aligned on the main axis using `justify-content` and on the cross axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
 
 ```html live-sample___flex-align-items
 <div class="box">
@@ -269,13 +269,13 @@ body {
 
 {{EmbedLiveSample("grid-gap")}}
 
-Early grid implementation included `gap` properties prefixed with `grid-`. All browsers support the unprefixed properties, though you may see the following properties in a code-base: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions are aliases of the unprefixed ones.
+Early grid implementations included `gap` properties prefixed with `grid-`. All browsers support the unprefixed properties, though you may see the following properties in a code-base: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions are aliases of the unprefixed ones.
 
 Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
 
 ## Box-alignment by layout type
 
-As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following guides for each layout type for details of how to use the alignment properties with it:
+As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following guides for details of how to use the alignment properties with each layout type:
 
 - [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)
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 6437905c3f8cee9..3318aaf9f4c55d8 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) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
@@ -65,7 +65,7 @@ However, in flexbox you can change the main axis by setting `flex-direction` to
 
 ### There is no justify-self in flexbox
 
-On the main axis, Flexbox deals with the flex items, 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.
+On the main axis, Flexbox deals with the flex items 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.
 
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 fe54ba7ce1c7179..31bfc3dadbb7257 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
@@ -6,13 +6,13 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS box alignment module](/en-US/docs/Web/CSS/CSS_box_alignment) 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).
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module 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 guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
+As this guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
-In this example using [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout), there is extra space in the {{glossary("grid container")}} after laying out the fixed width tracks on the inline {{glossary("main axis")}}. This space is distributed using {{cssxref("justify-content")}}. On the block {{glossary("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](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout), there is extra space in the {{glossary("grid container")}} after laying out the fixed-width tracks on the inline {{glossary("main axis")}}. This space is distributed using {{cssxref("justify-content")}}. On the block {{glossary("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%', 500)}}
 
@@ -43,7 +43,7 @@ These properties deal with aligning the item inside the grid area it is placed i
 - {{cssxref("align-items")}}
 - {{cssxref("place-items")}}
 
-The "items" properties, `align-items` and `justify-items`, are applied to the grid container and set the "self" properties, `align-self` and `justify-self`, 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 `*-items` properties, `align-items` and `justify-items`, are applied to the grid container and set the "self" properties, `align-self` and `justify-self`, on all grid items 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-items` and `justify-items` is `stretch`, and the initial value for `align-self` and `justify-self` is `auto`, 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.
 
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 3e1f2ab21225cfd..39959425c148140 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things which are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide which details the common features of box alignment across layout methods.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things that are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 In [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts), the {{glossary("alignment container")}} is the content box of the multicol container. The {{glossary("alignment subject")}} is the column box. The properties which apply to multi-column layouts are detailed below.
 
@@ -18,7 +18,7 @@ Using a value of `justify-content` other than `normal` or `stretch` will cause c
 
 ## column-gap
 
-The {{cssxref("column-gap")}} property was originally specified the multiple-column layout specification, and was later unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of `column-gap` as `0`, multicol treats it as `1em`, as your generally don't want to have no gap between columns.
+The {{cssxref("column-gap")}} property was originally specified in the multiple-column layout specification and then later unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of `column-gap` as `0`, multi-column layout treats it as `1em` — you generally want a gap between columns.
 
 ## See also
 

From 0db9155cc81e8a4451c35f8e610783114c0f81a4 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Tue, 14 Jan 2025 12:04:01 -0800
Subject: [PATCH 05/10] Update files/en-us/web/css/css_box_alignment/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/web/css/css_box_alignment/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4c7750d26320726..b476bdd0b166a81 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-align/
 
 {{CSSRef}}
 
-The **CSS box alignment** module specifies CSS features that relate to the alignment of boxes within their containers across all CSS. It defines the alignment of the various CSS box layout models, including block layout, table layout, flex layout, and grid layout, creating a consistent method of alignment across all of CSS. This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.
+The **CSS box alignment** module specifies CSS features relating to the alignment of boxes within their containers. It defines the alignment of the various CSS box layout models including block layout, table layout, flexible box layout (flexbox), and grid layout, creating a consistent alignment method across all of CSS.
 
 The module details alignment terminology, enabling alignment properties to be used in multiple layout modules, rather than limited to a particular layout method.
 

From ea0862e3252a5540dffaf582427195288d2813c3 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Tue, 14 Jan 2025 12:04:21 -0800
Subject: [PATCH 06/10] Update files/en-us/web/css/css_box_alignment/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/web/css/css_box_alignment/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 b476bdd0b166a81..30af542a2bb0d16 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -11,7 +11,7 @@ The **CSS box alignment** module specifies CSS features relating to the alignmen
 
 The module details alignment terminology, enabling alignment properties to be used in multiple layout modules, rather than limited to a particular layout method.
 
-Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
+Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom, and left. Instead, we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
 
 The alignment of text and inline-level content is defined in [CSS text module](/en-US/docs/Web/CSS/CSS_text) and [CSS inline module](/en-US/docs/Web/CSS/CSS_inline_layout), respectively.
 

From 68f4e8e9ab0178ee19b8ceaffdc4650f47f44fc6 Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 15 Jan 2025 00:12:11 -0800
Subject: [PATCH 07/10] edits per review

---
 .../css_box_alignment/box_alignment/index.md  | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
index aa3204d2ad966c2..9794afb81ba96de 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -6,9 +6,9 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models. The module aims to create a consistent method of alignment across all of CSS. The CSS box alignment properties provide full horizontal and vertical alignment capabilities. This guide details the general concepts found in this module.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models. The module aims to create a consistent method of alignment across all of CSS. The CSS box alignment properties provide full horizontal and vertical alignment capabilities.
 
-This guide provides an overview. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text](/en-US/docs/Web/CSS/CSS_text) and [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) modules.
+This guide details the general concepts found in this module. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text](/en-US/docs/Web/CSS/CSS_text) and [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) modules.
 
 ## Key concepts and terminology
 
@@ -50,10 +50,6 @@ The below image shows an alignment container with two alignment subjects inside.
 
 ![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](align-container-subjects.png)
 
-### Fallback alignment
-
-If you set an alignment that cannot be fulfilled, then the **{{Glossary("fallback alignment")}}** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.
-
 ## Types of alignment
 
 There are three different types of alignment that the specification details; these use keyword values.
@@ -64,7 +60,7 @@ There are three different types of alignment that the specification details; the
 
 ### Positional alignment
 
-**Positional alignment** is the position of an alignment subject with relation to its alignment container. The positional aligment keyword values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
+**Positional alignment** is the position of an alignment subject with relation to its alignment container. The positional alignment keyword values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
 
 - `center`
 - `start`
@@ -76,17 +72,17 @@ There are three different types of alignment that the specification details; the
 - `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.
+Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values, the {{cssxref("self-position")}} and {{cssxref("content-position")}} 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-hand side of the page. 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.
-
 ![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](writing-mode-start.png)
 
+Both have `justify-content: start`, but the location of the two starts is different because of the writing mode.
+
 ### Baseline alignment
 
-**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and self-alignment with `justify-self` and `align-self`.
+**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment {{cssxref("baseline-position")}} keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and self-alignment with `justify-self` and `align-self`.
 
 - `baseline`
 - `first baseline`
@@ -98,7 +94,7 @@ Baseline self-alignment shifts the boxes to align by baseline by adding a margin
 
 ### Distributed alignment
 
-**Distributed alignment** defines alignment as a distribution of space among alignment subjects. The distributed alignment keywords are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
+**Distributed alignment** defines alignment as a distribution of space among alignment subjects. The distributed alignment {{cssxref("content-distribution")}} keywords are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
 
 - `stretch`
 - `space-between`
@@ -211,7 +207,7 @@ body {
 
 ## Overflow alignment
 
-The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
+The {{cssxref("overflow-position")}} keywords `safe` and `unsafe` help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
 
 If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.
 

From 65942962c8a9bc2108a1bde3897d74928558fd5d Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 15 Jan 2025 00:18:13 -0800
Subject: [PATCH 08/10] edits per review

---
 .../css/css_box_alignment/box_alignment_in_flexbox/index.md | 4 ++--
 files/en-us/web/css/css_box_alignment/index.md              | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

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 3318aaf9f4c55d8..6228e5582fcae69 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,11 +6,11 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of flexbox. As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
-In this [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
+In this flexbox example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
 
 ```html live-sample___flex-align-items
 <div class="box">
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 30af542a2bb0d16..867f64dec0517e4 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -51,9 +51,7 @@ The alignment of text and inline-level content is defined in [CSS text module](/
 
 ## Guides
 
-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](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 
   - : Overview of the general concepts found in the CSS box alignment module.
 
@@ -95,5 +93,5 @@ As the CSS box alignment properties are implemented differently depending on the
 - [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 display](/en-US/docs/Web/CSS/CSS_display) module
-- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
 - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module

From 624a3b15c5ae84f12294e57c6deeeaa16606825e Mon Sep 17 00:00:00 2001
From: estelle <estelle@openwebdocs.org>
Date: Wed, 15 Jan 2025 00:20:48 -0800
Subject: [PATCH 09/10] link text

---
 .../box_alignment_in_block_abspos_tables/index.md               | 2 +-
 .../web/css/css_box_alignment/box_alignment_in_flexbox/index.md | 2 +-
 .../css/css_box_alignment/box_alignment_in_grid_layout/index.md | 2 +-
 .../box_alignment_in_multi-column_layout/index.md               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 8f12ffa6edb7394..099b136e46171da 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -77,7 +77,7 @@ For many use cases, turning the block container into a flex item will give you t
 
 ## See also
 
-- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 - [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)
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 6228e5582fcae69..6c535b9e539db94 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
@@ -159,7 +159,7 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l
 
 ## See also
 
-- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 - [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)
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 31bfc3dadbb7257..9a6a433d64dceac 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
@@ -69,7 +69,7 @@ The grid specification originally contained the definition for the properties {{
 
 ## See also
 
-- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 - [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
 - [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)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 39959425c148140..aada480e70b098d 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -22,7 +22,7 @@ The {{cssxref("column-gap")}} property was originally specified in the multiple-
 
 ## See also
 
-- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 - [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 for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)

From d932c779990e02e0aa46d79111fba439029f725b Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Wed, 15 Jan 2025 18:17:10 +0000
Subject: [PATCH 10/10] Fix suggestion snafu

---
 .../css/css_box_alignment/box_alignment_in_grid_layout/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9a6a433d64dceac..f7dff9a24a30737 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
@@ -43,7 +43,7 @@ These properties deal with aligning the item inside the grid area it is placed i
 - {{cssxref("align-items")}}
 - {{cssxref("place-items")}}
 
-The `*-items` properties, `align-items` and `justify-items`, are applied to the grid container and set the "self" properties, `align-self` and `justify-self`, on all grid items 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 `*-items` properties, `align-items` and `justify-items`, are applied to the grid container and set alignment for all grid items as a group. The `*-self` properties, `align-self` and `justify-self`, are instead set on grid items. This means that you can set alignment on all grid items, and 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-items` and `justify-items` is `stretch`, and the initial value for `align-self` and `justify-self` is `auto`, 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.