From fe07433d0e8fcf9e197ccdda03f6fa3588c5b8ac Mon Sep 17 00:00:00 2001
From: Bannon Tanner <bannon.n.tanner@gmail.com>
Date: Mon, 25 Feb 2019 17:50:00 -0600
Subject: [PATCH] fixed typo with instructions and preview (#26088)

* fixed typo with instructions and preview

Instructions stated that grid-template-columns was set to repeat(auto-fill, minmax(60px, 1fr)); but it was not in .container or .container2
Changed .container2 to already include this as I believe was intended, leaving camper to change .container on their own
Fixes #18034

* Update curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md

suggested change by @thecodingaviator

Co-Authored-By: bannon-tanner <bannon.n.tanner@gmail.com>

* possible fix for solution

* apply my suggestioned changes
---
 ...lexible-layouts-using-auto-fill.english.md | 53 +++++++++++++++++--
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
index 9feadb4e6a..5443ade809 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
@@ -7,8 +7,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
 
 ## Description
 <section id='description'>
-The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>.
-In the preview, <code>grid-template-columns</code> is set to
+The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining <code>auto-fill</code> with <code>minmax</code>, like this:
 <blockquote>repeat(auto-fill, minmax(60px, 1fr));</blockquote>
 When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
 <strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new one.
@@ -96,8 +95,54 @@ tests:
 <section id='solution'>
 
 
-```js
-var code = ".container {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));}"
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+  
+  .container {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* change the code below this line */
+    
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    
+    /* change the code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+  
+  .container2 {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: Silver;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(60px, 1fr));
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+<div class="container2">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
 ```
 
 </section>