一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS中使用grid布局实现一套模板多种布局代码示例

时间:2022-07-25 16:33:59 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS中使用grid布局实现一套模板多种布局代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

如上图,在日常开发中我们可能会遇到对页面进行不同布局配置的需求,实现方法也有很多,例如:

1.写多个页面,不同布局拥有不同的页面模板与样式代码,这种方法看起来是最麻烦也最没必要的,而且布局一但多起来编码会变得十分难受且冗余难以维护,特别当业务代码基本一致时,修改时也会变得繁琐,修改一种布局中的业务代码也要考虑到其他布局,显然这种方式是极其不推荐的。

2.写一个页面,页面内编写多套模板,通过条件控制实现不同布局风格。这种方法相比方法1的好处是使得业务代码可以在一处地方编写,并且相同的部分也只需编写一次,后期业务代码维护起来也变得更加容易。当然,方法1也可以通过引入外部文件实现同一套业务代码。然而这种方法问题在于模板跟样式都要编写几套,如果能只控制模板或只控制样式就可以实现的话无疑是更佳的方案。方法3将详细介绍通过grid布局方法编写一套模板多种样式实现布局布局风格控制。

3.写一个页面,通过grid布局将页面划分为合适的网格单元,即根据多种布局风格统一起来选择一个合适的行列分割数量。

页面模板,按照各种布局中网格数最多的编写(即4个)

css;">

将页面划分为12行12列共144个网格单元

css样式中编写不同布局的行列划分原则

.page-wrap {
  //
  //
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 1px 1px;
  grid-template-columns: repeat(12, 8.333333%);
  grid-template-rows: repeat(12, 8.333333%);
  position: relative;
  background: #FFFFFF;
}
.wrap-layout1,
.wrap-layout2,
.wrap-layout3,
.wrap-layout4 {
  background: #D8D8D8;
}

// 默认布局
.layout-default {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout2,
  .wrap-layout3,
  .wrap-layout4 {
    display: none;
  }
}

// 布局一
.layout1 {
  .wrap-layout1 {
    grid-column: 1 / 9;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 9 / 13;
    grid-row: 1 / 5;
  }
  .wrap-layout3 {
    grid-column: 9 / 13;
    grid-row: 5 / 9;
  }
  .wrap-layout4 {
    grid-column: 9 / 13;
    grid-row: 9 / 13;
  }
}

// 布局二
.layout2 {
  .wrap-layout1 {
    grid-column: 1 / 3;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 3 / 11;
    grid-row: 1 / 13;
  }
  .wrap-layout3 {
    grid-column: 11 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 布局三
.layout3 {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 3;
  }
  .wrap-layout2 {
    grid-column: 1 / 13;
    grid-row: 3 / 13;
  }
  .wrap-layout3 {
    display: none;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 布局四
.layout4 {
  .wrap-layout1 {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
  }
  .wrap-layout2 {
    grid-column: 7 / 13;
    grid-row: 1 / 7;
  }
  .wrap-layout3 {
    grid-column: 1 / 7;
    grid-row: 7 / 13;
  }
  .wrap-layout4 {
    grid-column: 7 / 13;
    grid-row: 7 / 13;
  }
}

热门栏目