代码: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布局实现一套模板多种布局都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~
