feat(curriculum): Add interactive examples to What Is the minmax Function and How Does It Work (#63162)

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.