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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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
一个捕获函数输出的函数
2007/02/14 PHP
php Ajax乱码
2008/04/09 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JSON相关知识汇总
2015/07/03 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Python 异常处理实例详解
2014/03/12 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Django之模板层的实现代码
2019/09/09 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python 如何设置守护进程
2020/10/29 Python
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
软件测试题目
2013/02/27 面试题
财务会计实习报告体会
2013/12/20 职场文书
网络管理专业求职信
2014/03/15 职场文书
六五普法规划实施方案
2014/03/21 职场文书
留学经费担保书
2014/05/12 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
个人剖析材料范文
2014/09/30 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server