grid布局

学习总结

因为要前后端交互写项目 就去学习了一下grid布局
grid布局
容器
grid-template-rows:行
grid-template-rows:列

将容器分割成几行几列

 /* 1 自动填充 */
            /* grid-template-columns: repeat(auto-fill,100px);
            grid-template-rows: repeat(auto-fill,100px); */
            /* 2 等比例占用 */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);

利用栅栏的对盒子进行放置

 div:first-child{
            grid-row-start:1;
            grid-column-start: 1;
            grid-row-end:4;
            grid-column-end: 2;
            background-color: aqua;
        }

为栅格命名 给格子起名字

 article{
          width: 300px;
          height: 300px;
          border: solid 5px seagreen;
          display: grid;
          grid-template-columns:[r1-start]100px[r1-end r2-start]100px[r2-end r3-start]100px[r3-end];
          grid-template-rows:[c1-start]100px[c1-end c2-start]100px[c2-end c3-start]100px[c3-end];
          row-gap: 10px;
          column-gap: 10px;

       
      }

      div:first-child{
          grid-row-start:r1-start;
          grid-column-start: c1-end;
          grid-row-end:c2-end;
          grid-column-end: r2-start;
          background-color: aqua;
      }

这一部分可以类比flex布局去理解
这两个属性是指在内容区的排列

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

这两个属性是指内容区域的排列方式整个内容区域在容器里面

.container {
  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布局很方便但是兼容性不好 适用于一些不规则地排列方法

下周

开始写项目了 我分配的第一个部分是瀑布流 开卷