diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md
index 728f6d1f43..a2f25a0474 100644
--- a/microsoft-edge/dev-videos/index.md
+++ b/microsoft-edge/dev-videos/index.md
@@ -362,7 +362,7 @@ July 5, 2022
 
 Covers:
 * Redesigned **Welcome** tool.
-* New color picker.
+* New Color Picker.
 * New memory heap snapshot node types.
 * High contrast mode bug fix.
 * Open any HTML page in the VS Code extension.
@@ -683,7 +683,7 @@ November 22, 2021
 
 The Microsoft Edge team specified and implemented the new EyeDropper API in collaboration with the Chromium open-source project. Provide feedback at [Issues - WICG/eyedropper | github.com](https://github.com/WICG/eyedropper-api/issues).
 
-Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers on the web.
+Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color-pickers on the web.
 
 See also:
 * [EyeDropper API](https://developer.mozilla.org/docs/Web/API/EyeDropper_API) at MDN.
diff --git a/microsoft-edge/devtools/accessibility/color-picker.md b/microsoft-edge/devtools/accessibility/color-picker.md
index 82b04c7fb4..d9b7e56f43 100644
--- a/microsoft-edge/devtools/accessibility/color-picker.md
+++ b/microsoft-edge/devtools/accessibility/color-picker.md
@@ -40,7 +40,7 @@ In DevTools, one way to view the contrast ratio of a text element is to use the
 
    The Color Picker opens:
 
-   ![The color picker, opened in the Styles tab, next to the color property of the element](./color-picker-images/accessibility-elements-styles-paragraph-highlight-color.png)
+   ![The Color Picker, opened in the Styles tab, next to the color property of the element](./color-picker-images/accessibility-elements-styles-paragraph-highlight-color.png)
 
 1. Examine the **Contrast ratio** section of the Color Picker:
 
diff --git a/microsoft-edge/devtools/css/grid-images/color-picker.png b/microsoft-edge/devtools/css/grid-images/color-picker.png
new file mode 100644
index 0000000000..92e04cd0da
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/color-picker.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-discover-grid.png b/microsoft-edge/devtools/css/grid-images/display-grid-overlay.png
similarity index 100%
rename from microsoft-edge/devtools/css/grid-images/grid-discover-grid.png
rename to microsoft-edge/devtools/css/grid-images/display-grid-overlay.png
diff --git a/microsoft-edge/devtools/css/grid-images/extend-grid-lines.png b/microsoft-edge/devtools/css/grid-images/extend-grid-lines.png
new file mode 100644
index 0000000000..9842acbdbd
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/extend-grid-lines.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-highlight-grid.png b/microsoft-edge/devtools/css/grid-images/grid-badge-selected.png
similarity index 100%
rename from microsoft-edge/devtools/css/grid-images/grid-highlight-grid.png
rename to microsoft-edge/devtools/css/grid-images/grid-badge-selected.png
diff --git a/microsoft-edge/devtools/css/grid-images/grid-editor-popup.png b/microsoft-edge/devtools/css/grid-images/grid-editor-popup.png
new file mode 100644
index 0000000000..adda7a4db6
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/grid-editor-popup.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-extend-grid-lines.png b/microsoft-edge/devtools/css/grid-images/grid-extend-grid-lines.png
deleted file mode 100644
index 38ffb90a3f..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-extend-grid-lines.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-grid-lanes-overlays.png b/microsoft-edge/devtools/css/grid-images/grid-grid-lanes-overlays.png
new file mode 100644
index 0000000000..d14cf492a2
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/grid-grid-lanes-overlays.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-color.png b/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-color.png
deleted file mode 100644
index a57f7157ab..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-color.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-highlight.png b/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-highlight.png
deleted file mode 100644
index 26bf6858c6..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays-highlight.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png b/microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png
deleted file mode 100644
index 8292e07bd0..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-hide-line-labels.png b/microsoft-edge/devtools/css/grid-images/grid-hide-line-labels.png
deleted file mode 100644
index 9a66ce2fa4..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-hide-line-labels.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-layout-pane.png b/microsoft-edge/devtools/css/grid-images/grid-layout-pane.png
deleted file mode 100644
index f2820e068d..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-layout-pane.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-show-area-names.png b/microsoft-edge/devtools/css/grid-images/grid-show-area-names.png
deleted file mode 100644
index 7ea119fcc6..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-show-area-names.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-show-line-names.png b/microsoft-edge/devtools/css/grid-images/grid-show-line-names.png
deleted file mode 100644
index 73f5b3d4ff..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-show-line-names.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-show-line-numbers.png b/microsoft-edge/devtools/css/grid-images/grid-show-line-numbers.png
deleted file mode 100644
index 3fa539099d..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-show-line-numbers.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/grid-show-track-sizes.png b/microsoft-edge/devtools/css/grid-images/grid-show-track-sizes.png
deleted file mode 100644
index f63c323cce..0000000000
Binary files a/microsoft-edge/devtools/css/grid-images/grid-show-track-sizes.png and /dev/null differ
diff --git a/microsoft-edge/devtools/css/grid-images/hide-line-labels.png b/microsoft-edge/devtools/css/grid-images/hide-line-labels.png
new file mode 100644
index 0000000000..eddab8f301
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/hide-line-labels.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/layout-tab.png b/microsoft-edge/devtools/css/grid-images/layout-tab.png
new file mode 100644
index 0000000000..c4b67d0476
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/layout-tab.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/multiple-overlays.png b/microsoft-edge/devtools/css/grid-images/multiple-overlays.png
new file mode 100644
index 0000000000..596f3c0c44
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/multiple-overlays.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/open-grid-editor-button.png b/microsoft-edge/devtools/css/grid-images/open-grid-editor-button.png
new file mode 100644
index 0000000000..36300a141a
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/open-grid-editor-button.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/overlay-display-settings.png b/microsoft-edge/devtools/css/grid-images/overlay-display-settings.png
new file mode 100644
index 0000000000..062582c98d
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/overlay-display-settings.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/show-area-names.png b/microsoft-edge/devtools/css/grid-images/show-area-names.png
new file mode 100644
index 0000000000..216dc6be85
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/show-area-names.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/show-element-in-the-elements-panel.png b/microsoft-edge/devtools/css/grid-images/show-element-in-the-elements-panel.png
new file mode 100644
index 0000000000..3664073304
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/show-element-in-the-elements-panel.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/show-line-names.png b/microsoft-edge/devtools/css/grid-images/show-line-names.png
new file mode 100644
index 0000000000..c2be8844e3
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/show-line-names.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/show-line-numbers.png b/microsoft-edge/devtools/css/grid-images/show-line-numbers.png
new file mode 100644
index 0000000000..8e6d020fa0
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/show-line-numbers.png differ
diff --git a/microsoft-edge/devtools/css/grid-images/show-track-sizes.png b/microsoft-edge/devtools/css/grid-images/show-track-sizes.png
new file mode 100644
index 0000000000..866815b2b8
Binary files /dev/null and b/microsoft-edge/devtools/css/grid-images/show-track-sizes.png differ
diff --git a/microsoft-edge/devtools/css/grid.md b/microsoft-edge/devtools/css/grid.md
index ce09ff4736..2a04885cf0 100644
--- a/microsoft-edge/devtools/css/grid.md
+++ b/microsoft-edge/devtools/css/grid.md
@@ -1,201 +1,396 @@
 ---
-title: Inspect CSS Grid
+title: Inspect CSS Grid layouts
 description: Using Microsoft Edge DevTools to view and change CSS grid properties on a webpage.
 author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 08/14/2024
+ms.date: 02/26/2026
 ---
-# Inspect CSS Grid
-
-This article walks you through identifying CSS grids on a website and debugging grid layout issues using customizable grid overlays.
-
-This article uses the [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo webpage.
+# Inspect CSS Grid layouts
+<!-- https://developer.chrome.com/docs/devtools/css/grid/ -->
+<!-- Copyright Jecelyn Yeen
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       https://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.  -->
+
+Use the **Layout** tab within the **Elements** tool to identify CSS grids on a website and debug grid layout issues by using customizable grid overlays.
+
+**Detailed contents:**
+* [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage)
+* [Align grid items and their content: the grid editor popup](#align-grid-items-and-their-content-the-grid-editor-popup)
+* [Grid viewing options](#grid-viewing-options)
+* [Overlay display settings](#overlay-display-settings)
+   * [Show line numbers](#show-line-numbers)
+   * [Hide line labels](#hide-line-labels)
+   * [Show line names](#show-line-names)
+   * [Show track sizes](#show-track-sizes)
+   * [Show area names](#show-area-names)
+   * [Extend grid lines](#extend-grid-lines)
+* [Grid overlays](#grid-overlays)
+   * [Enable overlay views of multiple grids](#enable-overlay-views-of-multiple-grids)
+   * [Customize the grid overlay color](#customize-the-grid-overlay-color)
+   * [Highlight the grid element in the webpage and DOM tree](#highlight-the-grid-element-in-the-webpage-and-dom-tree)
+* [See also](#see-also)
 
 
 <!-- ====================================================================== -->
-## Before you begin
+## Display the grid overlay in a rendered webpage
+<!-- Discover CSS grids  https://developer.chrome.com/docs/devtools/css/grid/#discover -->
 
 CSS Grid is a powerful layout paradigm for the web.  A good webpage to learn about CSS Grid and its features is [CSS grid layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout) at MDN.
 
+To use the grid overlay in a rendered webpage:
+
+1. Go to a page that uses CSS Grid layout, such as the [Inspect CSS Grid layouts](https://microsoftedge.github.io/Demos/devtools-grid/) demo page, in a new window or tab.
+
+1. Right-click the webpage, and then select **Inspect**.
+
+   DevTools opens, with the **Elements** tool selected, showing the DOM tree.
+
+1. In the DOM tree, expand **body** > **main**.
+
+   The `<div>` elements have a **grid** badge:
+
+   ![Displaying the grid overlay](./grid-images/display-grid-overlay.png)
+
+   When an HTML element in the webpage has `display: grid` or `display: inline-grid` applied to it, a **grid** badge is displayed next to the element in the DOM tree in the **Elements** tool.
+
+1. Click the **grid** badge next to an element, such as `<div class="fruit-box">`:
+
+   ![The grid badge, selected](./grid-images/grid-badge-selected.png)
+
+   A grid overlay is displayed over the element in the rendered webpage.  The **grid** badge changes from blue text on white background, to white text on blue background.
+
+   In the rendered webpage, the CSS Grid overlay appears on a layer in front of the webpage element.  The CSS Grid overlay shows the position of the grid lines (rows and columns) and tracks.
+
+   If you click the **grid** badge multiple times, it turns on and off.
+
+   Similarly, sometimes there's a **subgrid** badge.  You can toggle the GSS Grid overlay on a subgrid, by clicking the **subgrid** badge.  See [Subgrid](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid) at MDN.<!-- [Subgrid](https://developer.chrome.com/docs/devtools/elements/badges#subgrid) in _Badges reference_ in Chrome DevTools docs. -->
+
+1. Click the **Layout** tab, which is grouped with the **Styles** tab in the **Elements** tool:
+
+   ![The Layout tab](./grid-images/layout-tab.png)
+
+   The **Layout** tab includes a **Grid / Grid Lanes** section, which includes:
+
+   * A dropdown list.
+   * Checkboxes for display options.
+   * A checkbox for each element that uses CSS Grid layout.
+
+   When a webpage uses a CSS grid, the **Layout** tab includes the **Grid / Grid Lanes** section.  Use the **Grid / Grid Lanes** section to configure which information to display in grid overlays on the rendered webpage.
+
 
 <!-- ====================================================================== -->
-## Discover CSS grids
+## Align grid items and their content: the grid editor popup
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#grid-editor -->
+
+You can align CSS grid items and their content by just clicking a button (to open the grid editor popup), rather than having to directly define CSS rules.
+
+To align CSS grid items and their content:
+
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
+
+   As a result, the **Layout** tab is selected, for an element in the DOM tree (such as `<div class="fruit-box">`) that has a **grid** badge.
 
-When an HTML element in your webpage has `display: grid` or `display: inline-grid` applied to it, a **grid** badge is displayed next to the element in the DOM tree in the **Elements** tool:
+1. Select the **Styles** tab.
 
-![Discover grid](./grid-images/grid-discover-grid.png)
+1. Find a CSS rule that has the **Open grid editor** button, such as the `.fruit-box` rule:
 
-Click the **grid** badge next to an element to display a grid overlay over that element in the rendered webpage.  The overlay appears over the element, and shows the position of the grid lines and tracks:
+   ![The "Open grid editor" button](./grid-images/open-grid-editor-button.png)
 
-![Toggle grid badge](./grid-images/grid-highlight-grid.png)
+1. In the CSS rule, next to `display: grid`, click the **Open grid editor** button.
 
-When grids are included on a webpage, the **Layout** pane in the **Elements** tool includes a **Grid** section that lists the grid containers:
+   The **grid editor** popup opens:
 
-![Layout pane](./grid-images/grid-layout-pane.png)
+   ![The grid editor popup](./grid-images/grid-editor-popup.png)
 
-Use the **Grid** section to configure which information to display in grid overlays on the rendered webpage.  The **Grid** section in the **Layout** pane contains the following subsections:
+   The **grid editor** popup contains four sets of buttons as options:
+   * **align-content**
+   * **justify-content**
+   * **align-items**
+   * **justify-items**
 
-| Subsection | Purpose |
-| --- | --- |
-| **Overlay display settings** | Configures which information is displayed in the grid overlay. |
-| **Grid overlays** | Shows or hides the grid overlay for each grid container that's present on the webpage, and temporarily highlights a grid in the webpage. |
+   Within each set of buttons, the buttons are mutually exclusive option buttons.  If you click an option button twice, no option button is selected in that set, and the value returns to **normal**.
+
+1. In the **grid editor** popup, in any set of buttons, click a button.  To return to **normal**, click a button twice.
+
+   The button's foreground color changes from black to blue, and the value changes from **normal** to the selected value.
+
+   The grid items and content are re-rendered in the viewport.
+
+
+<!-- ====================================================================== -->
+## Grid viewing options
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#options -->
+
+The **Grid / Grid Lanes** section in the **Layout** pane contains two subsections:
+
+* [Overlay display settings](#overlay-display-settings)
+* [Grid overlays](#grid-overlays)
+
+Details are below.
 
 
 <!-- ====================================================================== -->
 ## Overlay display settings
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#display-settings -->
 
-In the **Layout** pane, in the expandable **Grid** section, the **Overlay display settings** section contains the following UI.
+In the **Element** tool's **Layout** pane, in the expandable **Grid / Grid Lanes** section, there' an **Overlay display settings** subsection:
 
+![The "Overlay display settings" subsection](./grid-images/overlay-display-settings.png)
 
-<!-- ------------------------------ -->
-#### Dropdown list
+The **Overlay display settings** subsection consists of two parts:
 
-Select one of the following options from the dropdown list:
+* A dropdown list, containing the following commands:
 
-| List item | Description |
-|:--- |:--- |
-| **Hide line labels** | Hides the labels of the lines for each grid overlay. |
-| **Show line numbers** | Displays the numbers of the lines for each grid overlay.  Selected by default. |
-| **Show line names** | Displays the names of the lines for each grid overlay when names are provided. |
+   * [Hide line labels](#hide-line-labels) - Hide the line labels for each grid overlay.
+   * [Show line numbers](#show-line-numbers) - Show the line numbers for each grid overlay (selected by default).
+   * [Show line names](#show-line-names) - Show the line names for each grid overlay in the case of grids with line names.
+
+* Checkboxes:
 
-The following sections explain the **Overlay display settings** dropdown list commands.
+   * [Show track sizes](#show-track-sizes) - Toggle to show or hide track sizes.
+   * [Show area names](#show-area-names) - Toggle to show or hide area names, in the case of grids with named grid areas.
+   * [Extend grid lines](#extend-grid-lines) - By default, grid lines are only shown inside the element that has `display: grid` or `display: inline-grid` set on it.  When you turn on this option, the grid lines extend to the edge of the viewport along each axis.
 
+Details are below.
 
-<!-- ---------- -->
-###### Hide line labels
 
-In the dropdown list, select **Hide line labels** to hide the labels of the lines for each grid overlay:
+<!-- ------------------------------ -->
+#### Show line numbers
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#line-numbers -->
 
-![Hide line labels](./grid-images/grid-hide-line-labels.png)
+You can show or hide line numbers (rows and columns) in the grid overlay in the rendered webpage.  In CSS Grid, _line numbers_ are used to identify the vertical and horizontal lines that separate rows and columns of a CSS grid.  These line numbers are not for the lines of code in the HTML source file.
 
+To show or hide line numbers (rows and columns) in the grid overlay:
 
-<!-- ---------- -->
-###### Show line numbers
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
 
-In the dropdown list, select **Show line numbers** to display the numbers of the lines for each grid overlay (selected by default):
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection > **Show line labels** dropdown list, select **Show line numbers**.  This is selected by default.
 
-![Display line numbers](./grid-images/grid-show-line-numbers.png)
+   The numbers of the lines (rows and columns) for each grid overlay are displayed:
 
-By default, the positive and negative line numbers are displayed on the grid overlay.  For information about negative numbers in the grid overlay, see [Counting backwards](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement#counting_backwards) in _Grid layout using line-based placement_ at MDN.
+   ![Display line numbers](./grid-images/show-line-numbers.png)
 
+<!-- start of upstream: -->
+By default, the positive and negative line numbers (rows and columns) are displayed on the grid overlay.  For information about negative numbers in the grid overlay, see [Counting backwards](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement#counting_backwards) in _Grid layout using line-based placement_ at MDN.
 
-<!-- ---------- -->
-###### Show line names
 
-In the dropdown list, select **Show line names** to view the line names instead of numbers; this displays the names of the lines for each grid overlay when names are provided:
+<!-- ------------------------------ -->
+#### Hide line labels
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#line-labels -->
 
-![Show line names](./grid-images/grid-show-line-names.png)
+To hide line labels in the grid overlay:
 
-In the above example, 4 lines have names: `left`, `middle1`, `middle2`, and `right`.
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
 
-For more information about line names in the grid overlay, see [Layout using named grid lines](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) at MDN.
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection > **Show line labels** dropdown list, select **Hide line labels**:
 
-<!--In the demo, **orange** element spans from left to right, with `grid-column: left` and `grid-column: right` CSS.  Showing line names makes it easier to visualize the start and end position of the element.  -->
+   ![Hide line labels](./grid-images/hide-line-labels.png)
 
+   The labels of the lines (rows/columns) are hidden, on every grid overlay.
 
 
 <!-- ------------------------------ -->
-#### Checkboxes
+#### Show line names
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#line-names -->
 
-The **Overlay display settings** section within the **Grid** section in the **Layout** pane contains the following checkboxes:
+In the grid overlay in the rendered webpage, you can show line names.  This makes it easier to visualize the start and end position of an element.
 
-| Checkbox | Description |
-|:--- |:--- |
-| **Show track sizes**  | Displays or hides the sizes of the tracks. |
-| **Show area names** | Displays or hides the names of the area, when names are provided. |
-| **Extend grid lines** | Displays or hides the extensions of the grid dimensions along each axis.  By default, grid lines are only shown inside the element with `display: grid` or `display: inline-grid` CSS set on it. |
+To show line names in the grid overlay:
+
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
+
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection > **Show line labels** dropdown list, select **Show line names**:
+
+   ![Show line names](./grid-images/show-line-names.png)
+
+   Line names instead of numbers are displayed.  This option displays the names of the lines for each grid overlay, if names are provided.
+
+   In the above example, 4 lines have names: `left`, `middle1`, `middle2`, and `right`.
+
+   In the demo, the **Orange** element spans from left to right, via `grid-column: left` and `grid-column: right` CSS rules.
+
+See also:
+* [Layout using named grid lines](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) at MDN.
+   
+
+<!-- ------------------------------ -->
+#### Show track sizes
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#track-sizes -->
 
-The following sections explain these checkboxes.
+In the grid overlay in the rendered webpage, you can show track sizes.
 
+To show track sizes in the grid overlay:
 
-<!-- ---------- -->
-###### Show track sizes
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
 
-To view the track sizes of the grid, select the **Show track sizes** checkbox:
+1. In the **Elements** tool's **Layout** tab, in the **Grid / Grid Lanes** section, in the **Grid / Grid Lanes overlays** subsection, select the checkbox for each element on which to show the grid overlay.  For example, select the checkbox next to `div.fruit-box` and `div.snack-box`.
 
-![Show track sizes](./grid-images/grid-show-track-sizes.png)
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection, select the **Show track sizes** checkbox:
 
-The `[authored size]` and `[computed size]` are then displayed in each line label.
+   ![Show track sizes](./grid-images/show-track-sizes.png)
+
+Each line label shows the `authored size` (if defined in the CSS) and the `computed size`:
 
 | Size | Details |
 |:--- |:--- |
-| **authored size** | The size defined in stylesheet (omitted if not defined). |
-| **computed size** | The actual size on screen. |
+| `authored size` | The size defined in the CSS stylesheet.  Omitted from the label, if not defined. |
+| `computed size` | The actual size on screen. |
+
+In the demo, the column sizes are defined as follows, in the CSS property `grid-template-columns`:
+
+```css
+.fruit-box {
+  display: grid;
+  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
+  ...
+}
+
+.snack-box {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  ...
+}
+```
+
+**Column labels:**
 
-In the demo, the `snack-box` column sizes are defined in the `grid-template-columns:1fr 2fr;` CSS.  Therefore, the column line labels display both authored and computed sizes:
+The following track-size line labels are displayed on the grid columns, for the demo's element `<div class="snack-box">`:
 
 | Track size | Authored size | Computed size |
 |:--- |:--- |:--- |
-| **1fr** &#x2022; **48.33px** | 1fr | 48.33px |
-| **2fr** &#x2022; **96.67px** | 2fr | 96.67px |
+| **1fr** &#x2022; **96.66px** | 1fr | 96.66px |
+| **2fr** &#x2022; **193.34px** | 2fr | 193.34px |
 
-The line labels on the rows display only computed sizes, since there are no row sizes defined in the stylesheet:
+If your machine's display is set to a different pixel density, the demo might produce different values, such as half as many pixels.
+
+The line label on each grid column displays the `authored size` in addition to the `computed size`, because column sizes have been authored (specified), in the CSS property `grid-template-columns` in the CSS stylesheet.
+
+**Row labels:**
+
+The following track-size line labels are displayed on the grid rows, for the demo's element `<div class="snack-box">`:
 
 | Track size | Authored size | Computed size |
 |:--- |:--- |:--- |
-| **40px** | &nbsp;| 40px |
-| **40px** | &nbsp;| 40px |
+| **80px** | n/a | 80px |
+| **80px** | n/a | 80px |
 
+If your machine's display is set to a different pixel density, the demo might produce different values, such as half as many pixels.
 
-<!-- ---------- -->
-###### Show area names
+The line label on each grid row doesn't display an `authored size`, only the `computed size`, because row sizes have not been authored (specified) in the CSS property `grid-template-rows` in the CSS stylesheet.
 
-To view the area names, select the **Show area names** checkbox:
+See also:
+* [grid-template-columns](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-columns) at MDN.
+* [grid-template-rows](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-rows) at MDN.
 
-![Show area names](./grid-images/grid-show-area-names.png)
 
-In the above example, there are 3 areas in the grid: **top**, **bottom1** and **bottom2**.
+<!-- ------------------------------ -->
+#### Show area names
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#area-names -->
+
+In the grid overlay in the rendered webpage, you can show area names, such as **top**, **bottom1** and **bottom2**.
 
+To show area names:
 
-<!-- ---------- -->
-###### Extend grid lines
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
 
-To extend the grid lines to the edge of the viewport along each axis, select the **Extend grid lines** checkbox:
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection, select the **Show area names** checkbox:
 
-![Extend grid lines](./grid-images/grid-extend-grid-lines.png)
+   ![Show area names](./grid-images/show-area-names.png)
+
+
+<!-- ------------------------------ -->
+#### Extend grid lines
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#extend-grid-lines -->
+
+You can extend the grid overlay's grid lines to the edge of the viewport, along each axis.
+
+To extend the grid lines:
+
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
+
+1. In the **Grid / Grid Lanes** section > **Overlay display settings** subsection, select the **Extend grid lines** checkbox:
+
+   ![Extend grid lines](./grid-images/extend-grid-lines.png)
 
 
 <!-- ====================================================================== -->
 ## Grid overlays
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#overlays -->
 
-The **Grid overlays** section contains a list of grids that are present on the webpage, each with a checkbox, along with various options.
+In the **Elements** tool's **Layout** tab (grouped with the **Styles** tab), the **Grid / Grid Lanes overlays** section contains a list of elements that have a CSS grid.  Each grid has checkbox, along with various options.
+
+![The "Grid / Grid Lanes overlays" subsection](./grid-images/grid-grid-lanes-overlays.png)
 
 
 <!-- ------------------------------ -->
 #### Enable overlay views of multiple grids
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#view-multiple-grids -->
+
+To enable overlay views of multiple grids:
 
-To display the overlay grid for multiple grids, select the checkbox next to each name of the grid:
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
 
-![Enable overlay views of multiple grids](./grid-images/grid-grid-overlays.png)
+1. In the **Grid / Grid Lanes** section > **Grid / Grid Lanes overlays** subsection, select the checkbox next to each name of multiple grids:
 
-In the above example, there are three grid overlays enabled, each grid represented with a different color in the rendered webpage:
+   ![Enable overlay views of multiple grids](./grid-images/multiple-overlays.png)
 
-*  `body` - the gold grid overlay.
-*  `div.fruit-box` - the pink grid overlay.
-*  `div.snack-box` - the blue grid overlay.
+   A CSS Grid overlay is displayed for each selected element that has a CSS grid.  In the above example, three grid overlays are enabled.  Each CSS grid has a different color in the rendered webpage:
+
+   * `body` - the gold grid overlay.
+   * `div.fruit-box` - the pink grid overlay.
+   * `div.snack-box` - the blue grid overlay.
 
 
 <!-- ------------------------------ -->
 #### Customize the grid overlay color
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#customize-overlay-color -->
+
+To customize the grid overlay color:
+
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
+
+1. In the **Grid / Grid Lanes** section > **Grid / Grid Lanes overlays** subsection, click the **Choose the overlay color for this element** box next to an element name:
+
+   ![Customize the grid overlay color](./grid-images/color-picker.png)
 
-To open the color picker and customize the grid overlay color, click the box next to the name of the grid overlay:
+   The Color Picker opens.
 
-![Customize the grid overlay color](./grid-images/grid-grid-overlays-color.png)
+See also:
+* [Change colors with the Color Picker](../css/reference.md#change-colors-with-the-color-picker) in _CSS features reference_.
 
 
 <!-- ------------------------------ -->
 #### Highlight the grid element in the webpage and DOM tree
+<!-- https://developer.chrome.com/docs/devtools/css/grid/#highlight-grid -->
+
+For any element that has a CSS grid layout, you can automatically scroll to the element in the rendered webpage, and automatically select the element in the DOM tree.
+
+To scroll to a grid-using element in the webpage and select the element in the DOM tree:
+
+1. Do the steps in [Display the grid overlay in a rendered webpage](#display-the-grid-overlay-in-a-rendered-webpage), above.
+
+1. In the **Grid / Grid Lanes** section > **Grid / Grid Lanes overlays** subsection, click the **Show element in the Elements panel** (![Show element in the Elements panel icon](./grid-images/show-element-in-element-panel-icon.png)) button next to an element name:
 
-To scroll to a grid layout in the rendered webpage and select the element that has the grid layout in the DOM tree:
+   ![Highlight the grid on the rendered webpage](./grid-images/show-element-in-the-elements-panel.png)
 
-* In the **Grid overlays** section, click the **Show element in the Elements panel** (![Show element in the Elements panel icon](./grid-images/show-element-in-element-panel-icon.png)) button next to the element name:
+   * The rendered webpage is scrolled to the element that uses CSS grid layout, and the element is briefly highlighted in the rendered webpage.
 
-![Highlight the grid on the rendered webpage](./grid-images/grid-grid-overlays-highlight.png)
+   * In the **Elements** tool, the DOM tree automatically scrolls to the element, and the element is selected.
 
-This works regardless of whether the element's checkbox is selected or cleared.
+   This automatic scrolling and highlighting works regardless of whether the element's checkbox is selected or cleared.
 
 
 <!-- ====================================================================== -->
@@ -203,12 +398,14 @@ This works regardless of whether the element's checkbox is selected or cleared.
 <!-- all links in article, in order of article: -->
 
 Demo webpages:
-* [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/)
+* [Inspect CSS Grid layouts](https://microsoftedge.github.io/Demos/devtools-grid/)
 
 MDN:
 * [CSS grid layout](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout)
    * [Grid layout using line-based placement](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
    * [Layout using named grid lines](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+* [grid-template-columns](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-columns)
+* [grid-template-rows](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-rows)
 
 
 <!-- ====================================================================== -->
diff --git a/microsoft-edge/devtools/elements-tool/elements-tool.md b/microsoft-edge/devtools/elements-tool/elements-tool.md
index ed64b5f12a..3b249391c2 100644
--- a/microsoft-edge/devtools/elements-tool/elements-tool.md
+++ b/microsoft-edge/devtools/elements-tool/elements-tool.md
@@ -35,7 +35,7 @@ The **Elements** tool contains the following tabs:
 
 * [CSS features reference](../css/reference.md)
 * [Get started viewing and changing CSS](../css/index.md)
-* [Inspect CSS Grid](../css/grid.md)
+* [Inspect CSS Grid layouts](../css/grid.md)
 * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
 * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md)
 * [Get started viewing and changing the DOM](../dom/index.md)
diff --git a/microsoft-edge/devtools/samples/index.md b/microsoft-edge/devtools/samples/index.md
index 5f39c02350..48173ea2ad 100644
--- a/microsoft-edge/devtools/samples/index.md
+++ b/microsoft-edge/devtools/samples/index.md
@@ -49,7 +49,7 @@ The following demos demonstrate DevTools features.
 | DOM Examples | Used for [Get started viewing and changing the DOM](../dom/index.md). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) demo |
 | Explain Console errors and warnings in Copilot in Edge | Generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explain Console errors and warnings in Copilot in Edge](https://microsoftedge.github.io/Demos/devtools-explain-error/) demo |
 | Inspect tool | Used for [Analyze pages using the Inspect tool](../css/inspect.md). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) |
-| Inspect CSS Grid | Used for [Inspect CSS Grid](../css/grid.md). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo |
+| Inspect CSS Grid | Used for [Inspect CSS Grid layouts](../css/grid.md). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid layouts](https://microsoftedge.github.io/Demos/devtools-grid/) demo |
 | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](../javascript/index.md). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) demo |
 | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a |
 | **Performance** tool Activity Tabs | Used for [View activities in a table](../performance/reference.md#view-activities-in-a-table) in _Performance features reference_, about the **Performance** tool's **Bottom-up**, **Call tree**, and **Event log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) |
diff --git a/microsoft-edge/devtools/whats-new/2020/06/devtools.md b/microsoft-edge/devtools/whats-new/2020/06/devtools.md
index 57902e7f81..312b9ef471 100644
--- a/microsoft-edge/devtools/whats-new/2020/06/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2020/06/devtools.md
@@ -44,7 +44,7 @@ To try out the experiment with a sample, see [CSS Grid planner example](https://
 Chromium issue [#1047356](https://crbug.com/1047356)
 
 See also:
-* [Inspect CSS Grid](../../../css/grid.md)
+* [Inspect CSS Grid layouts](../../../css/grid.md)
 
 
 <!-- ------------------------------ -->
diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md
index 626ca86f12..b82ece1c8d 100644
--- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md
@@ -78,7 +78,7 @@ Update: This feature has been released and is no longer experimental.<!-- To tur
 
 See also:
 * [CSS grid debugging features](../06/devtools.md#css-grid-debugging-features) in _What's new in DevTools (Microsoft Edge 85)_.
-* [Inspect CSS Grid in Microsoft Edge DevTools](../../../css/grid.md).
+* [Inspect CSS Grid layouts](../../../css/grid.md)
 
 Chromium issue: [#1047356](https://crbug.com/1047356)
 
@@ -406,7 +406,7 @@ See also:
 
 DevTools now provides color suggestions for low color contrast text.
 
-In the example below, `h1` has low-contrast text.  To fix the contrast, open the color picker of the `color` property in the **Styles** pane.  After you expand the **Contrast ratio** section, DevTools provides AA and AAA color suggestions.  Select the suggested color, to apply the color.
+In the example below, `h1` has low-contrast text.  To fix the contrast, open the Color Picker of the `color` property in the **Styles** pane.  After you expand the **Contrast ratio** section, DevTools provides AA and AAA color suggestions.  Select the suggested color, to apply the color.
 
 ![Color picker suggests AA and AAA color suggestions](./devtools-images/contrast-color-suggestion.png)
 
diff --git a/microsoft-edge/devtools/whats-new/2021/01/devtools.md b/microsoft-edge/devtools/whats-new/2021/01/devtools.md
index 9175fee0c6..cd047c0863 100644
--- a/microsoft-edge/devtools/whats-new/2021/01/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2021/01/devtools.md
@@ -120,7 +120,7 @@ Update: This feature has been released and is no longer experimental.<!-- valid.
 
 See also:
 * [Getting element information from the Inspect overlay](../../../css/inspect.md#getting-element-information-from-the-inspect-overlay) in _Analyze pages using the Inspect tool_.
-* [Inspect CSS Grid](../../../css/grid.md).
+* [Inspect CSS Grid layouts](../../../css/grid.md).
 
 
 <!-- ------------------------------ -->
@@ -147,7 +147,7 @@ Update: This feature has been released and is no longer experimental.<!-- valid.
 
 See also:
 * [Getting element information from the Inspect overlay](../../../css/inspect.md#getting-element-information-from-the-inspect-overlay) in _Analyze pages using the Inspect tool_.
-* [Inspect CSS Grid](../../../css/grid.md).
+* [Inspect CSS Grid layouts](../../../css/grid.md).
 
 
 <!-- ====================================================================== -->
@@ -288,7 +288,7 @@ See also:
 
 ###### Color pickers for custom CSS properties
 
-The **Styles** pane now displays color pickers for custom CSS properties.  To cycle through the RGBA, HSLA, and Hex formats of the color value, press and hold **Shift** and then click the color picker:
+The **Styles** pane now displays Color Pickers for custom CSS properties.  To cycle through the RGBA, HSLA, and Hex formats of the color value, press and hold **Shift** and then click the Color Picker:
 
 ![Color pickers for custom CSS properties](./devtools-images/elements-styles-change-color-format.png)
 
diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md
index ef66648753..992dd3cb5c 100644
--- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md
@@ -225,7 +225,7 @@ For an example webpage, see [Scroll Snap Demo](https://mathiasbynens.github.io/c
 For the history of this feature in the Chromium open-source project, see Issue [862450](https://crbug.com/862450).
 
 See also:
-* [Inspect CSS Grid](../../../css/grid.md)
+* [Inspect CSS Grid layouts](../../../css/grid.md)
 * [CSS features reference](../../../css/reference.md)
 <!-- todo: it seems that related regular docs are needed for grid (has a page), flexbox, & scroll-snap.  the present section is all there is for scroll-snap per FTS of repo -->
 
diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md
index 9d2e55382c..3c757aa529 100644
--- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md
+++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md
@@ -181,7 +181,7 @@ When an HTML element on your page has `display: grid` or `display: inline-grid`
 For the history of this feature in the Chromium open-source project, see Issue [1203241](https://crbug.com/1203241).
 
 See also:
-* [Inspect CSS Grid](../../../css/grid.md)
+* [Inspect CSS Grid layouts](../../../css/grid.md)
 
 
 <!-- ------------------------------ -->
diff --git a/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md b/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md
index 5513474777..7b10e516cc 100644
--- a/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md
+++ b/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md
@@ -32,7 +32,7 @@ The **masonry** adorner appears next to elements in the DOM tree, similar to the
 ![The "masonry" adorner on the body tag in the DOM tree](./devtools-141-images/masonry-adorner.png)
 
 See also:
-* [Inspect CSS Grid](/microsoft-edge/devtools/css/grid)
+* [Inspect CSS Grid layouts](/microsoft-edge/devtools/css/grid)
 * [CSS Masonry demos](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry)
 * [Brick by brick: Help us build CSS Masonry](https://developer.chrome.com/blog/masonry-update) - Blog post.
 * [Elements > Layout tab adds masonry layout support](https://developer.chrome.com/blog/new-in-devtools-141#masonry) - Chromium What's New.
diff --git a/microsoft-edge/devtools/workspaces/workspace-tutorial.md b/microsoft-edge/devtools/workspaces/workspace-tutorial.md
index 5e7af61642..ba0e40778e 100644
--- a/microsoft-edge/devtools/workspaces/workspace-tutorial.md
+++ b/microsoft-edge/devtools/workspaces/workspace-tutorial.md
@@ -205,7 +205,7 @@ To make a change in the CSS file and save it to disk by using the **Elements** t
 
 The color of the `<h1>` element is still set to the new color.  The change remains across a refresh, because when you made the change, DevTools saved the change to disk.  When you refreshed the page, your local server served the modified copy of the file from disk.
 
-**Tip:** You can also change the color by clicking the fucshia-colored swatch to open the color picker to pick a new color. The HEX value for the color you pick is the color name.
+**Tip:** You can also change the color by clicking the fucshia-colored swatch to open the Color Picker to pick a new color. The HEX value for the color you pick is the color name.
 
 Continue with the next section.
 
diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml
index a70207775f..aaeb51b419 100644
--- a/microsoft-edge/toc.yml
+++ b/microsoft-edge/toc.yml
@@ -462,7 +462,7 @@
                   href: ./devtools/css/index.md
                   displayName: Elements tool
 
-                - name: Inspect CSS Grid
+                - name: Inspect CSS Grid layouts
                   href: ./devtools/css/grid.md
                   displayName: Elements tool