feat(curriculum): add interactive examples to css grid (#65372)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>

curriculum/challenges/english/blocks/review-css-grid/671a99394bedfb9a5bc687c4.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-css-grid
 ---
 
-# --description--
+# --interactive--
 
 ## CSS Grid Basics
 
@@ -85,7 +85,11 @@ Here is an example of using the `grid-column` property to make an element stretc
 
 - **`grid-template-areas`**: The property is used to provide a name for the items you are going to position on the grid. 
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
+
 <div class="container">
   <div class="header">Header</div>
   <div class="sidebar">Sidebar</div>
@@ -134,6 +138,8 @@ Here is an example of using the `grid-column` property to make an element stretc
 }
 ```
 
+:::
+
 ## Debugging CSS
 
 - **DevTools (Developer Tools)**: DevTools allow you to inspect and modify your CSS in real-time. The Styles pane shows all the CSS rules applied to the selected element, including inherited styles. You can toggle individual properties on and off, edit values, and even add new rules directly in the browser. This immediate feedback is incredibly useful for experimenting with different styles without modifying your source code.