diff --git a/curriculum/challenges/spanish/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.spanish.md
index 36c12cba58d..4d949f8522d 100644
--- a/curriculum/challenges/spanish/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.spanish.md
+++ b/curriculum/challenges/spanish/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.spanish.md
@@ -110,7 +110,74 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  .item1 {
+    background: LightSkyBlue;
+    grid-area: header;
+  }
+
+  .item2 {
+    background: LightSalmon;
+    grid-area: advert;
+  }
+
+  .item3 {
+    background: PaleTurquoise;
+    grid-area: content;
+  }
+
+  .item4 {
+    background: lightpink;
+    grid-area: footer;
+  }
+
+  .container {
+    font-size: 1.5em;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px auto 1fr auto;
+    grid-gap: 10px;
+    grid-template-areas:
+      "header"
+      "advert"
+      "content"
+      "footer";
+  }
+
+  @media (min-width: 300px){
+    .container{
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr auto;
+      grid-template-areas:
+        "advert header"
+        "advert content"
+        "advert footer";
+    }
+  }
+
+  @media (min-width: 400px){
+    .container{
+      /* change the code below this line */
+
+      grid-template-areas:
+        "header header"
+        "advert content"
+        "footer footer";
+
+    /* change the code above this line */
+    }
+  }
+</style>
+
+<div class="container">
+  <div class="item1">header</div>
+  <div class="item2">advert</div>
+  <div class="item3">content</div>
+  <div class="item4">footer</div>
+</div>
 ```
 </section>