CSS中使用grid布局实现一套模板多种布局
发布时间：2022-07-11 15:57:21 作者：IM_XiaoHuya 
我要评论
我要评论这篇文章主要介绍了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样式中编写不同布局的行列划分原则
.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布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋友跟随小编一起看看吧2025-06-20- 本文给大家讲解CSS 的三种核心布局机制——普通流(Normal Flow)、浮动(Float)和定位(Positioning)对于创建灵活、响应式的网页至关重要,本文将深入探讨这三种机制的工作原2025-06-19
文章介绍如何用CSS实现角标效果,通过.active类结合::after和::before伪元素,利用定位、边框和旋转创建红色边框与白色三角形的提示标志,适用于按钮或卡片元素的视觉增强设计2025-06-19CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)
CSS Anchor Positioning是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持需启用实验 flag,它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比
CSS 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关系,以下是 static、relative、absolute、fixed、sticky 的详细对比和应用2025-06-17CSS place-items: center解析与用法详解
place-items: center; 是一个强大的 CSS 简写属性，用于同时控制 网格(Grid) 和 弹性盒(Flexbox) 布局中的对齐方式，本文给大家介绍CSS place-items: center； 详解与用法2025-06-17
在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧2025-06-17- CSS单位区别与使用场景总结：px绝对、vw/vh响应式,%继承父尺寸,em/rem文字缩放,vmin/vmax适应宽高变化,固定布局用px或%,响应式布局用vw/vh/rem,文字用em或rem，本文给大家2025-06-16
- 这篇文章主要介绍了CSS 样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2025-05-21
- 在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具，本文介绍CSS基础中padding，通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元2025-05-16
最新评论