2018-09-30 22:01:58 +00:00
---
id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
2019-08-05 16:17:33 +00:00
forumTopicId: 301127
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
`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.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
**Note:** If your container can't fit all your items on one row, it will move them down to a new one.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
In the second grid, use `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.
# --hints--
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
code.match(
/.container2\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
)
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
2018-10-29 20:44:31 +00:00
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
2018-09-30 22:01:58 +00:00
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
2020-02-27 15:20:46 +00:00
/* Only change code below this line */
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
grid-template-columns: repeat(3, minmax(60px, 1fr));
2018-10-08 00:01:53 +00:00
2020-02-27 15:20:46 +00:00
/* Only change code above this line */
2018-09-30 22:01:58 +00:00
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
< / style >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< 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 >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2020-07-13 16:58:50 +00:00
```html
< style > . container { grid-template-columns : repeat ( auto - fill , minmax ( 60 px , 1 fr ) ) ; } . container2 { grid-template-columns : repeat ( auto - fit , minmax ( 60 px , 1 fr ) ) ; } < / style >
2018-09-30 22:01:58 +00:00
```