CSS display:grid

Gird是一种二维的布局方式，相较flex来说grid还多控制了列~

example :

<div class="wrapper">
   <div class="item">One</div>
   <div class="item" >Two</div>
   <div class="item">Three</div>
   <div class="item">Four</div>
   <div class="item">Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows : 100px 50px;
  gap:3px;
}
.item
{
  border:1px solid black;
}

grid-template-columns

决定有多少栏，每一栏的宽度为多少
除了可设定px外还有其他宽度选项

==fr== : 根据剩余的宽度决定占多少百分比

==repeat(3, 200px)== : repeat(重复次数,宽度)

==minmax(100px,1fr)== minmax(最小值,最大值)，宽度最小会等於最小值，最大只会等於最大值。

==auto== 撑满剩下的空间。

grid-template-rows

决定有多少列，使用参数与columns一样~

gap

元素与元素间的间隔，有点类似margin的感觉，但仔细观察grid-item不会推开container本身。