New css grid demo

MicrosoftEdge · Aug 13, 2024 · d4f1d97 · d4f1d97
1 parent 1817273
commit d4f1d97
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ last sync'd April 16, 2024
 | DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/). | [/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/) |
 | 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) | [Explaining console errors demo](https://microsoftedge.github.io/Demos/devtools-explain-error/) |
 | Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) |
+| Inspect CSS Grid | Used for [Inspect CSS Grid](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/grid). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) |
 | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Demo: Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) |
 | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a |
 | Performance Activity Tabs | Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table), 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/devtools-grid/README.md b/devtools-grid/README.md
@@ -0,0 +1,5 @@
+# Inspect CSS Grid in DevTools
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-grid/)** ⬅️
+
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Inspect CSS Grid](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/grid).
diff --git a/devtools-grid/index.html b/devtools-grid/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Inspect CSS Grid</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
+
+  <style>
+    body {
+      margin: 2em;
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      display: grid;
+      justify-items: center;
+    }
+
+    .fruit-box {
+      display: grid;
+      grid-gap: 10px;
+      grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
+      border: 2px solid;
+      width: 300px;
+      padding: 4px
+    }
+
+    .fruit-box div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 80px;
+      color: #000
+    }
+
+    .apple {
+      background: red
+    }
+
+    .kiwi {
+      background: #90ee90
+    }
+
+    .mango {
+      background: #ff0
+    }
+
+    .orange {
+      background: orange;
+      grid-column: left/right
+    }
+
+    .snack-box {
+      display: grid;
+      grid-gap: 10px;
+      grid-template-areas: "top top" "bottom1 bottom2";
+      grid-template-columns: 1fr 2fr;
+      width: 300px;
+      border: 2px solid;
+      padding: 4px;
+      margin: 20px 0;
+      animation-fill-mode: forwards;
+      animation: spin 8s linear infinite;
+      animation-play-state: paused
+    }
+
+    .snack-box div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 80px;
+      color: #000
+    }
+
+    .snack-box .chips {
+      background: #fafad2;
+      grid-area: bottom1
+    }
+
+    .snack-box .peanut {
+      background: #f4a460;
+      grid-area: bottom2
+    }
+
+    .snack-box .seaweed {
+      background: #00fa9a;
+      grid-area: top
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Inspect CSS Grid</h1>
+
+  <main>
+    <h2>Fruit box</h2>
+
+    <div class="fruit-box">
+      <div class="apple">Apple</div>
+      <div class="kiwi">Kiwi</div>
+      <div class="mango">Mango</div>
+      <div class="orange">Orange</div>
+    </div>
+
+    <h2>Snack box</h2>
+
+    <div class="snack-box">
+      <div class="chips">Chips</div>
+      <div class="peanut">Peanut</div>
+      <div class="seaweed">Seaweed</div>
+    </div>
+
+  </main>
+</body>
+
+</html>