Update article "Inspect CSS Grid layouts"

[mikehoffms]

Rendered article for review:

• Inspect CSS Grid layouts
  • /devtools/css/grid.md
  • Internal preview: https://review.learn.microsoft.com/microsoft-edge/devtools/css/grid?branch=pr-en-us-3734
  • External preview: https://github.com/MicrosoftDocs/edge-developer/blob/user/mikehoffms/grid-lines/microsoft-edge/devtools/css/grid.md
  • Before/live: https://learn.microsoft.com/microsoft-edge/devtools/css/grid
  • Upstream: https://developer.chrome.com/docs/devtools/css/grid/
  • Changed title from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts
  • Added Detailed contents: nav/outline.
  • Changed topmost section heading from:
    Discover CSS grids
    to:
    Display the grid overlay in a rendered webpage
  • Added section: Align grid items and their content: the grid editor popup
  • Added section: Grid viewing options
  • Rewrote and clarified all sections.
  • Explained line numbers in CSS Grid.
  • In each section, added a hidden comment with the upstream URL.
  • Updated all pngs.
    • Improved png file names.
  • Rewrote from system-oriented documentation to task-oriented documentation.
    • Provided steps to reproduce screenshots on the user's (or maintainer's) machine.
  • Show track sizes section: Doubled the pixel counts (dependent on display settings).

---

Incidental files:

• Videos about web development with Microsoft Edge

  • /dev-videos/index.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/dev-videos/index?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Uppercased Color Picker.

• Test text-color contrast using the Color Picker

  • /devtools/accessibility/color-picker.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/accessibility/color-picker?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Uppercased Color Picker.

• Inspect, edit, and debug HTML and CSS with the Elements tool

  • /devtools/elements-tool/elements-tool.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/elements-tool/elements-tool?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• Sample code for DevTools

  • /devtools/samples/index.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/samples/index?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 85)

  • /devtools/whats-new/2020/06/devtools.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2020/06/devtools?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 86)

  • /devtools/whats-new/2020/08/devtools.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2020/08/devtools?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid in Microsoft Edge DevTools
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 89)

  • /devtools/whats-new/2021/01/devtools.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2021/01/devtools?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 91)

  • /devtools/whats-new/2021/04/devtools.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2021/04/devtools?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 92)

  • /devtools/whats-new/2021/05/devtools.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2021/05/devtools?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• What's new in DevTools (Microsoft Edge 141)

  • /devtools/whats-new/2025/10/devtools-141.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/whats-new/2025/10/devtools-141?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Changed link text from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

• Workspace tutorial (Sources tool Workspace tab)

  • /devtools/workspaces/workspace-tutorial.md
  • Internal preview: https://review.learn.microsoft.com/en-us/microsoft-edge/devtools/workspaces/workspace-tutorial?branch=pr-en-us-3734
  • External preview:
  • Before/live:
  • Uppercased Color Picker.

• TOC

  • toc.yml
  • Changed node label from:
    Inspect CSS Grid
    to:
    Inspect CSS Grid layouts

AB#60820500

[mikehoffms]

LGTM - Writer/Editor

[learn-build-service-prod]

Learn Build status updates of commit 4981c5a:

✅ Validation status: passed

File	Status	Preview URL	Details
microsoft-edge/dev-videos/index.md	✅Succeeded	View
microsoft-edge/devtools/accessibility/color-picker.md	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/color-picker.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/display-grid-overlay.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/extend-grid-lines.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/grid-badge-selected.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/grid-discover-grid.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-editor-popup.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/grid-extend-grid-lines.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-grid-lanes-overlays.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/grid-grid-overlays-color.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-grid-overlays-highlight.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-grid-overlays.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-hide-line-labels.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-highlight-grid.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-layout-pane.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-show-area-names.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-show-line-names.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-show-line-numbers.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/grid-show-track-sizes.png	✅Succeeded	n/a (file deleted or renamed)
microsoft-edge/devtools/css/grid-images/hide-line-labels.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/layout-tab.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/multiple-overlays.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/open-grid-editor-button.png	✅Succeeded	View
microsoft-edge/devtools/css/grid-images/overlay-display-settings.png	✅Succeeded	View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.