CSS中使用grid布局實(shí)現(xiàn)一套模板多種布局
我要評(píng)論
如上圖，在日常開發(fā)中我們可能會(huì)遇到對(duì)頁(yè)面進(jìn)行不同布局配置的需求，實(shí)現(xiàn)方法也有很多，例如：
1.寫多個(gè)頁(yè)面，不同布局擁有不同的頁(yè)面模板與樣式代碼，這種方法看起來(lái)是最麻煩也最沒(méi)必要的，而且布局一但多起來(lái)編碼會(huì)變得十分難受且冗余難以維護(hù)，特別當(dāng)業(yè)務(wù)代碼基本一致時(shí)，修改時(shí)也會(huì)變得繁瑣，修改一種布局中的業(yè)務(wù)代碼也要考慮到其他布局，顯然這種方式是極其不推薦的。
2.寫一個(gè)頁(yè)面，頁(yè)面內(nèi)編寫多套模板，通過(guò)條件控制實(shí)現(xiàn)不同布局風(fēng)格。這種方法相比方法1的好處是使得業(yè)務(wù)代碼可以在一處地方編寫，并且相同的部分也只需編寫一次，后期業(yè)務(wù)代碼維護(hù)起來(lái)也變得更加容易。當(dāng)然，方法1也可以通過(guò)引入外部文件實(shí)現(xiàn)同一套業(yè)務(wù)代碼。然而這種方法問(wèn)題在于模板跟樣式都要編寫幾套，如果能只控制模板或只控制樣式就可以實(shí)現(xiàn)的話無(wú)疑是更佳的方案。方法3將詳細(xì)介紹通過(guò)grid布局方法編寫一套模板多種樣式實(shí)現(xiàn)布局布局風(fēng)格控制。
3.寫一個(gè)頁(yè)面，通過(guò)grid布局將頁(yè)面劃分為合適的網(wǎng)格單元，即根據(jù)多種布局風(fēng)格統(tǒng)一起來(lái)選擇一個(gè)合適的行列分割數(shù)量。
頁(yè)面模板，按照各種布局中網(wǎng)格數(shù)最多的編寫（即4個(gè)）
<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>
將頁(yè)面劃分為12行12列共144個(gè)網(wǎng)格單元
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;
}
// 默認(rèn)布局
.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;
}
}
到此這篇關(guān)于CSS中使用grid布局實(shí)現(xiàn)一套模板多種布局的文章就介紹到這了,更多相關(guān)css grid布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見(jiàn)使用場(chǎng)景、常見(jiàn)問(wèn)題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見(jiàn)使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
