grid简单布局

最新推荐文章于 2024-09-05 21:53:05 发布

qianxiling123

最新推荐文章于 2024-09-05 21:53:05 发布

阅读量88

点赞数

分类专栏：学习笔记文章标签：前端

本文链接：https://blog.csdn.net/liutianxiao123/article/details/124299290

版权

学习笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏


      height:calc(~'100vh - 420px');
      width:100%;
      display: grid;
      grid-template-columns: repeat(5,1fr);//列高
      grid-template-rows: repeat(2,1fr);//行高
      row-gap: 8px;//行间距
      column-gap: 8px;//列间距
      div:nth-child(7){
        grid-column-start: 3;//列起始位置
        grid-column-end: span 2;//列结束位置
      }
      div:nth-child(8){
        grid-row-start: 1;
        grid-row-end: span 2;//占位2
        grid-column-start: 5;
      }