html grid布局,grid布局实例
如上图，在日常开发中，我们可能会遇到对页面不同布局配置的需求，实现的方式有很多种，比如：
1.写多个页面，不同的布局有不同的页面模板和样式代码。这种方法似乎是最麻烦的，也是最没必要的。而且一旦布局多了，编码会变得很不舒服，冗余，很难维护。尤其是当业务编码基本一致时，修改会变得繁琐。修改一个布局中的业务代码也应该考虑其他布局。显然，这种方法是极不推荐的。
2.用多套模板写一个页面，通过条件控制实现不同的布局风格。与方法1相比，这种方法的优点是业务代码可以写在一个地方，同样的部分只需要写一次，更便于后期业务代码的维护。当然，方法1也可以通过引入外部文件来实现同一套业务代码。但是这种方法的问题是要写几套模板和样式。如果只能控制模板或样式，这无疑是一个更好的方案。方法详细介绍一套用网格布局方法编写的模板来实现布局风格控制。
3.写一个页面，通过网格布局将页面划分成合适的网格单元，即根据多种布局样式选择合适的行数和列数。
模板，根据各种布局的网格数编写(即4)。
template div :class=[page-wrap ，layoutClass]！-layout one-div class= wrap-layout 1 play-component:loading= loading :program-info= programs info . area 1 //div！-layout 2-div class= wrap-layout 2 play-component:loading= loading :program-info= programs info . area 2 //div！-layout three-div class= wrap-layout 3 play-component:loading= loading :program-info= programs info . area 3 //div！-layout four-div class= wrap-layout 4 play-component:loading= loading :program-info= programs info . area 4 //div/div/template将页面分成12行12列，共144个网格单元。
用css样式编写不同布局的行列划分原则。页面换行{//宽度：1920px//高度：1080px宽度：100%；身高：100%；显示：网格；grid-gap:1px 1px；网格-模板-列：重复(12，8.333333%)；网格-模板-行：重复(12，8.333333%)；位置：相对；背景：# FFFFFF}.包装布局1，包装布局2，包装布局3，wrap-layout 4 { background:# d8d 8；}//默认布局。布局-默认。wrap-layout 1 { grid-column:1/13；网格-行：1/13；} .包装布局2，包装布局3，wrap-layout 4 { display:none；} }//布局一. Layout1 {。wrap-layout 1 { grid-column:1/9；网格-行：1/13；} .wrap-layout 2 { grid-column:9/13；网格-行：1/5；} .wrap-layout 3 { grid-column:9/13；网格-行：5/9；} .wrap-layout 4 { grid-column:9/13；网格-行：9/13；} }//布局二。布局2 {。wrap-layout 1 { grid-column:1/3；网格-行：1/13；} .wrap-layout2 {网格-列：3/11；网格-行：1/13；} .wrap-layout 3 { grid-column:11/13；网格-行：1/13；} .wrap-layout 4 { display:none；} }//布局三。布局3 {。wrap-layout 1 { grid-column:1/13；网格-行：1/3；} .wrap-layout 2 { grid-column:1/13；网格-行：3/13；} .wrap-layout 3 { display:none；} .wrap-layout 4 { display:none；} }//布局四。布局4 {。wrap-layout 1 { grid-column:1/7；网格-行：1/7；} .wrap-layout 2 { grid-column:7/13；网格-行：1/7；} .wrap-layout 3 { grid-column:1/7；网格-行：7/13；} .wrap-layout 4 { grid-column:7/13；网格-行：7/13；}}就是这样。本文介绍了在CSS中使用网格布局来实现一组模板的多种布局。更多相关css网格布局内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。