CSS中使用grid布局实现一套模板多种布局


Posted in HTML / CSS onJuly 15, 2022

CSS中使用grid布局实现一套模板多种布局

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

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

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

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

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

<template>
  <div :class="['page-wrap', layoutClass]">
    <!--  布局一  -->
    <div class="wrap-layout1">
      <play-component :loading="loading" :program-info="programsInfo.area1" />
    </div>
    <!--  布局二  -->
    <div class="wrap-layout2">
      <play-component :loading="loading" :program-info="programsInfo.area2" />
    </div>
    <!--  布局三  -->
    <div class="wrap-layout3">
      <play-component :loading="loading" :program-info="programsInfo.area3" />
    </div>
    <!--  布局四  -->
    <div class="wrap-layout4">
      <play-component :loading="loading" :program-info="programsInfo.area4" />
    </div>
  </div>
</template>

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

CSS中使用grid布局实现一套模板多种布局

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

.page-wrap {
  //width: 1920px;
  //height: 1080px;
  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;
  }
}

到此这篇关于CSS中使用grid布局实现一套模板多种布局的文章就介绍到这了,更多相关css grid布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 #HTML / CSS
使用HBuilder制作一个简单的HTML5网页
使用CSS定位HTML元素的实现方法
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
CSS SandBox应用场景及常见问题
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python连接数据库的方法
2017/10/19 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python中的__init__作用是什么
2020/06/09 Python
机械系大学毕业生推荐信
2013/11/27 职场文书
职工运动会感言
2014/02/07 职场文书
现金出纳岗位职责
2014/03/15 职场文书
三年级小学生评语
2014/04/22 职场文书
工作评语大全
2014/04/26 职场文书
无传销社区工作方案
2014/05/13 职场文书
服务理念口号
2014/06/11 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
审美与表现自我评价
2015/03/09 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android