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 相关文章推荐
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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获取文件后缀名的三个函数
2012/10/15 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
详解Vite的新体验
2021/02/22 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
应届生如何写自荐信
2014/01/05 职场文书
英语自我评价范文
2014/01/24 职场文书
酒店节能减排方案
2014/05/26 职场文书