From ece9a98ae1254d82a4d2fde9f61446dd5d8ff6e5 Mon Sep 17 00:00:00 2001
From: Clarence Bakosi <clarencepenz@users.noreply.github.com>
Date: Tue, 28 Oct 2025 19:41:01 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples to How Can You
 Position It ems on the Grid Using the grid-template-areas Property (#63167)

---
 .../673226b97d4a731e0577ae93.md               | 57 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
index 4acb39ffb30..1ac87970abf 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property
 ---
 
-# --description--
+# --interactive--
 
 The `grid-template-areas` property lets you design a visual grid layout by using named labels.
 
@@ -40,9 +40,12 @@ If you don't know what it is, the Holy Grail layout is a web design pattern with
 
 Many solutions exist to implement the holy grail layout, but using `grid-template-areas` and the `grid-area` property is the most straightforward way to create it.
 
-Here's the HTML for the holy grail layout:
+Here's an example for the holy grail layout:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css">
 <div class="grid-container">
   <div class="header">
     <h2>Header</h2>
@@ -60,6 +63,56 @@ Here's the HTML for the holy grail layout:
 </div>
 ```
 
+```css
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    'header header header'
+    'sidebar-left main sidebar-right'
+    'footer footer footer';
+  grid-gap: 10px;
+  background-color: #2196F3;
+  padding: 10px;
+}
+
+.header {
+  grid-area: header;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  text-align: center;
+}
+
+.sidebar-left {
+  grid-area: sidebar-left;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  text-align: center;
+}
+
+.main {
+  grid-area: main;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  text-align: center;
+}
+
+.sidebar-right {
+  grid-area: sidebar-right;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  text-align: center;
+}
+
+.footer {
+  grid-area: footer;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  text-align: center;
+}
+```
+
+:::
+
 Please note that both the `grid-template-areas` and `grid-area` properties can be used independently of each other.
 
 The `grid-template-areas` property is specifically used to define a visual layout by mapping out named grid areas within the grid container.