3.1 KiB
3.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a94fe6269fb03452672e462 | Create Flexible Layouts Using auto-fit | 0 | https://scrimba.com/p/pByETK/c3dPph8 |
Description
auto-fit
works almost identically to auto-fill
. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill
keeps inserting empty rows or columns and pushes your items to the side, while auto-fit
collapses those empty rows or columns and stretches your items to fit the size of the container.
NoteIf your container can't fit all your items on one row, it will move them down to a new one.
Instructions
auto-fit
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 the difference.
Tests
tests:
- text: <code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</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-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</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;
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
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;
}
</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));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}"