CSS中使用grid布局實現(xiàn)一套模板多種布局

發(fā)布時間：2022-07-11 15:57:21 作者：IM_XiaoHuya

這篇文章主要介紹了CSS中使用grid布局實現(xiàn)一套模板多種布局,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

如上圖，在日常開發(fā)中我們可能會遇到對頁面進行不同布局配置的需求，實現(xiàn)方法也有很多，例如：

1.寫多個頁面，不同布局擁有不同的頁面模板與樣式代碼，這種方法看起來是最麻煩也最沒必要的，而且布局一但多起來編碼會變得十分難受且冗余難以維護，特別當業(yè)務代碼基本一致時，修改時也會變得繁瑣，修改一種布局中的業(yè)務代碼也要考慮到其他布局，顯然這種方式是極其不推薦的。

2.寫一個頁面，頁面內編寫多套模板，通過條件控制實現(xiàn)不同布局風格。這種方法相比方法1的好處是使得業(yè)務代碼可以在一處地方編寫，并且相同的部分也只需編寫一次，后期業(yè)務代碼維護起來也變得更加容易。當然，方法1也可以通過引入外部文件實現(xiàn)同一套業(yè)務代碼。然而這種方法問題在于模板跟樣式都要編寫幾套，如果能只控制模板或只控制樣式就可以實現(xiàn)的話無疑是更佳的方案。方法3將詳細介紹通過grid布局方法編寫一套模板多種樣式實現(xiàn)布局布局風格控制。

3.寫一個頁面，通過grid布局將頁面劃分為合適的網(wǎng)格單元，即根據(jù)多種布局風格統(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;
  }
}

到此這篇關于CSS中使用grid布局實現(xiàn)一套模板多種布局的文章就介紹到這了,更多相關css grid布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

Tag：css Grid 布局

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

CSS中使用grid布局實現(xiàn)一套模板多種布局

相關文章

最新評論

文章分類

大家感興趣的內容

最近更新的內容