# 自适应Crid
在线codepen
https://codepen.io/rachelandrew/pen/GZQYOL
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# auto-fill
auto-fill自动填充用尽可能多的列填充行。因此，只要有新列可以容纳，它就会隐式地创建列，因为它试图用尽可能多的列填充行。新添加的列可以是空的，也可以是空的，但它们仍将在行中占用指定的空间。
# auto-fit
auto-fit将当前可用的列扩展到空间中，使它们占用任何可用的空间。浏览器在用额外的列填充额外的空间(就像自动填充一样)，然后折叠空的那些之后会这样做。