3.2 KiB
3.2 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a94fe5469fb03452672e461 | Create Flexible Layouts Using auto-fill | 0 | https://scrimba.com/p/pByETK/cmzdycW |
Description
auto-fill
with minmax
.
In the preview, grid-template-columns
is set to
repeat(auto-fill, minmax(60px, 1fr));When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. Note
If your container can't fit all your items on one row, it will move them down to a new one.
Instructions
auto-fill
with repeat
to fill the grid with columns that have a minimum width of 60px
and maximum of 1fr
. Then resize the preview to see auto-fill in action.
Tests
tests:
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');
Challenge Seed
<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(3, 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>
Solution
var code = ".container {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));}"