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实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
Yii rules常用规则示例
2016/03/15 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
浅谈Python单向链表的实现
2015/12/24 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python 支付整合开发包的实现
2019/01/23 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
python实现移动木板小游戏
2020/10/09 Python
selenium自动化测试入门实战
2020/12/21 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
中秋寄语大全
2014/04/11 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
个人工作总结范文2014
2014/11/07 职场文书
辞职信标准格式
2015/02/27 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS