From 014d31f9242670784a1750ddaa7a6a710c13a3d5 Mon Sep 17 00:00:00 2001
From: Clarence Bakosi <clarencepenz@users.noreply.github.com>
Date: Tue, 28 Oct 2025 20:24:31 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples to What Is the
 minmax Function and How Does It Work (#63162)

---
 .../673226a62eb2121da41a3d68.md                       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
index 22da92eb7e6..1acc5c6f24d 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-minmax-function-and-how-does-it-work
 ---
 
-# --description--
+# --interactive--
 
 The `minmax()` function defines the range for the size of a grid track, specifying how much space a row or column can occupy.
 
@@ -29,9 +29,12 @@ The two values work together this way:
 
 The grid track size adjusts dynamically between the `min` and `max` values based on content and container size.
 
-Let's look at a practical example with this HTML:
+Let's look at a practical example:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css">
 <div class="grid-container">
   <div>
     <h2>Item 1</h2>
@@ -42,8 +45,6 @@ Let's look at a practical example with this HTML:
 </div>
 ```
 
-And the grid CSS:
-
 ```css
 .grid-container {
   display: grid;
@@ -58,6 +59,8 @@ And the grid CSS:
 }
 ```
 
+:::
+
 What's happening here? 
 
 The first `column, minmax(150px, 300px)`, will always be at least `150px` and at most `300px`, depending on the available space.