转载：www.cnblogs.com/cythia/p/10…
grid-template-columns：用来指定行的宽度
grid-template-rows：用来指定行的高度
repeat的第一个参数表示有几行或者几列，第二个参数是每行或者没列的宽度或者高度
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
有时候单元格的大小是固定的，但是容器的大小不确定。如果希望每一行或则每一列都尽可能的容纳更多的单元格，我们就可以使用auto-fill来自动填充（这个应该可以做自适应屏幕）
<div id="wrapper1"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> <div class="item item-6">6</div> <div class="item item-7">7</div> <div class="item item-8">8</div> <div class="item item-9">9</div> </div>
#wrapper1 {
display: grid; grid-template-columns: repeat(auto-fill, 100px); // grid-template-columns: repeat(2, 100px 80px 80px); grid-template-rows: repeat(3, 100px); .item { font-size: 4em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; } .item-9 { background-color: #4dc7ec; }}
