Grid布局

容器、项目

通过 display:grid或 display:inline-grid创建一个网格容器，该元素的所有子元素将称为网格项目

网格

grid-template-columns 和 grid-template-rows 属性来定义网格容器中网格的行宽和列高。容器内部的水平区域称为行，垂直区域称为列

grid-template-columns: repeat(3, 200px);
grid-template-rows: 100px 200px;

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>

.wrapper {
  margin: 60px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 200px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;
}

隐式网格

注意：如果网格设置的比如三行两列，但是项目超出了6个，那么超出的项目就是隐式网格

隐式网格的高度：即项目的高度。

可以通过grid-auto-rows和grid-auto-columns可以对隐式网格的行列进行设置：

grid-auto-rows: 50px;  //设置隐式网格的高度50px
grid-auto-columns: 50px; //宽度好像无效

网格线 (占据空间)

有了网格线，我们可以通过网格线指定跨轨道的网格元素，从而实现网格元素占多行多列的效果。子元素通过grid-column-start，grid-column-end，grid-row-start，grid-row-end或者grid-column和grid-row，或者通过grid-area这一个属性来设置来指定元素占据的网格轨道。

这里的属性值不仅可以指定网格线，还可以指定span xx 这个的意思是占据多少网格轨道。这个更符合我们的思维习惯。

这里有7个属性，其实很好记忆，占据空间是通过指定网格线来指定的，所以会有行列 + 开始结束，这里是4个属性。然后行列的开始结束分别提供一个缩写，这里就是2个属性。最后，可以通过grid-area一个属性指定行列。

grid-area的顺序是row-start / column-start / row-end / column-end。

因此，可以通过该方式轻松实现瀑布流效果

 <div class="wrapper">
            <div class="one item">One</div>
            <div class="two item">Two</div>
            <div class="three item">Three</div>
            <div class="four item"></div>
            <div class="five item"></div>
            <div class="six item"></div>
        </div>


.wrapper {
            width: 300px;
            height: 300px;
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            /*  声明列的宽度   */
            grid-template-columns: repeat(3, 100px);
            /*  声明行间距和列间距  */
            /*  声明行的高度  */
            grid-template-rows: repeat(1, 100px);
            border: 5px solid red;
            grid-auto-rows: 50px;
            grid-auto-columns: 50px;
        }
        .one {
            background: #19caad;
            grid-area: 1/1/2/4;
        }
        .two {
            background: #8cc7b5;
            grid-area: 2/1/4/2;
        }
        .three {
            background: #d1ba74;
            grid-row: 2/3;
            grid-column: 2 / span 2;
        }
          .item {
            width: 100%;
            height: 100%;
            color: #fff;
        }

网格间距

网格单元之间可以通过grid-column-gap，grid-row-gap或者grid-gap设置网格间距。

对齐方式

justify-items

水平方向的网格项目中的内容的对齐方式

justify-content

水平方向上所有网格在容器中的对齐方式

align-items

垂直方向的网格项目中的内容的对齐方式

align-content

垂直方向的网格在容器中的对齐方式

highlight: a11y-dark

案例：实现分格

 .container {
            padding: 10px;
            width: 170px;
            height: 220px;
            background-color: rgba(57, 63, 63, 0.8);
            display: grid;
            grid-template-rows: repeat(4, 20px);
            row-gap: 5px;
            grid-template-columns: repeat(4, 20px);
            column-gap: 23px;
            grid-auto-rows: 38px;
            justify-content: center;
        }
        .list-item {
            background-color: red;
        }
        
        <div class="container">
            <div class="list-item">1</div>
            <div class="list-item">2</div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
            <div class="list-item"></div>
        </div>