gird布局

      <div className="container">
        <div className="item">1</div>
        <div className="item">2</div>
        <div className="item">3</div>
        <div className="item">4</div>
        <div className="item">5</div>
        <div className="item">6</div>
        <div className="item">7</div>
        <div className="item">8</div>
        <div className="item">9</div>
      </div>

.container{

    display:gird;
    gird-template-rows:100px 100px 100px;/repeat(3,100px)/ 1fr 2fr/ 表示第二个是第一个的两倍宽
    gird-template-columns:100px 100px 100px; //定义一个三行三列，行高列宽都是100的格子布局
        
    grid-row-gap: 20px; //行间距
    grid-column-gap: 20px; //列间距

    justify-items: start / end/ center/ stretch //表示单元格内容的水平位置
    align-items:

    justify-content: start | end | center | stretch | space-around | space-between | space-evenly //表示整个内容区域在容器里面的水平位置
    align-content：start | end | center | stretch | space-around | space-between | space-evenly


    grid-auto-flow: row/column/  渲染顺序


    .item{
      justify-self: start / end/ center/ stretch  //表示单元格内容内容区域在容器里面的水平位置
      align-self：

      grid-column-start 属性， 例如，一个3X3的表格，竖线1-4，横线1-4
      grid-column-end 属性，
      grid-row-start 属性， span 2;  //表示跨越2行
      grid-row-end 属性Ï
    }

    

}