垂直居中grid方案

垂直居中有多个方案，flex/table-cell/line-height/margin/padding等，现在说下grid方案，了解grid网格布局

<div class="box">              
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
      <div class="cell">6</div>
      <div class="cell">7</div>
      <div class="cell">8</div>
</div>

在多个子元素下，设置父级 display:grid,grid-template-columns设置列数和列宽，可以单独设置grid-template-columns:60px 60px 60px 60px,grid-gap: grid-row-gap grid-column-gap;

grid-gap为行距和列距简写，align-items和justify-items为内容居中设置

        display: grid;
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: repeat(2, 60px);
        grid-gap: 10px;
        align-items: center;
        justify-items: center;  
        justify-content: center;
        align-content: center;
        width: 100%;
        height: 500px;
        background: #f3f3f3;