MicrosoftDocs · captainbrosset · Mar 5, 2026 · Mar 4, 2026
diff --git 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
@@ -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
diff --git a/...ls/css/grid-images/grid-discover-grid.png → .../css/grid-images/display-grid-overlay.png b/...ls/css/grid-images/grid-discover-grid.png → .../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
diff --git a/...s/css/grid-images/grid-highlight-grid.png → ...s/css/grid-images/grid-badge-selected.png b/...s/css/grid-images/grid-highlight-grid.png → ...s/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
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
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
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
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
diff --git a/microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png b/microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png
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
diff --git a/microsoft-edge/devtools/css/grid-images/grid-layout-pane.png b/microsoft-edge/devtools/css/grid-images/grid-layout-pane.png
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
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
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
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
diff --git a/microsoft-edge/devtools/css/grid-images/hide-line-labels.png b/microsoft-edge/devtools/css/grid-images/hide-line-labels.png
diff --git a/microsoft-edge/devtools/css/grid-images/layout-tab.png b/microsoft-edge/devtools/css/grid-images/layout-tab.png
diff --git a/microsoft-edge/devtools/css/grid-images/multiple-overlays.png b/microsoft-edge/devtools/css/grid-images/multiple-overlays.png
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
diff --git a/microsoft-edge/devtools/css/grid-images/overlay-display-settings.png b/microsoft-edge/devtools/css/grid-images/overlay-display-settings.png
diff --git a/microsoft-edge/devtools/css/grid-images/show-area-names.png b/microsoft-edge/devtools/css/grid-images/show-area-names.png
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
diff --git a/microsoft-edge/devtools/css/grid-images/show-line-names.png b/microsoft-edge/devtools/css/grid-images/show-line-names.png
diff --git a/microsoft-edge/devtools/css/grid-images/show-line-numbers.png b/microsoft-edge/devtools/css/grid-images/show-line-numbers.png
diff --git a/microsoft-edge/devtools/css/grid-images/show-track-sizes.png b/microsoft-edge/devtools/css/grid-images/show-track-sizes.png
diff --git a/microsoft-edge/devtools/css/grid.md b/microsoft-edge/devtools/css/grid.md
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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