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