gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed typo with instructions and preview (#26088)

Browse Source 
* 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
This commit is contained in:
Bannon Tanner 2019-02-25 17:50:00 -06:00 committed by Randell Dawson
parent ff53235efd
commit fe07433d0e
1 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
View File

@ -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>