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..aa3204d2ad966c2
--- /dev/null
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -0,0 +1,292 @@
+---
+title: CSS box alignment overview
+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](/en-US/docs/Web/CSS/CSS_text) and [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) modules.
+
+## 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; 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 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 with `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-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)
+
+### 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`
+- `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 done for singular boxes using `justify-self` or `align-self`, or for groups of boxes using `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 (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)
+
+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)
+
+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
+
+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 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 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)
+- [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..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,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 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..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 [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](/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 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`, 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-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..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,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 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 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 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.
 
-### 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..30af542a2bb0d16 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -7,320 +7,83 @@ 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.
+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.
 
-> [!NOTE]
-> The documentation for each layout method will detail how Box Alignment is applied there.
+The module details alignment terminology, enabling alignment properties to be used in multiple layout modules, rather than limited to a particular layout method.
 
-## Older alignment methods
+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.
 
-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.
+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.
 
-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
-
-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")}}
+## 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)
-
-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.
-
-## 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")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("place-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-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.
+### Data types
 
-```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>
-```
+- {{cssxref("baseline-position")}}
+- {{cssxref("content-distribution")}}
+- {{cssxref("content-position")}}
+- {{cssxref("overflow-position")}}
+- {{cssxref("self-position")}}
 
-```css hidden live-sample___grid-gap
-body {
-  font: 1.2em sans-serif;
-}
+### Terms and definitions
 
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
+- {{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)
 
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
+## Guides
 
-```css live-sample___grid-gap
-.box {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 10px 2em;
-}
+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 :first-child {
-  align-self: center;
-}
-```
+- [Box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 
-{{EmbedLiveSample("grid-gap")}}
+  - : Overview of the general concepts found in the CSS box alignment module.
 
-> [!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.
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
 
-Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
+  - : How box alignment works in the context of flexbox.
 
-## 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
 
+- {{cssxref("alignment-baseline")}}
+- {{cssxref("dominant-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")}}
-- {{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
 
@@ -328,6 +91,9 @@ As the CSS box alignment properties are implemented differently depending on the
 
 ## 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
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 9a93407803090a1..fd48292e03effa7 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)