Grid 网格布局是一种强大的前端布局方案,相比于flex弹性布局,grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程
Grid布局将整个区域划分成一个个网格,区域内的元素可以根据网格来指定位置,下面是一个简单的示意图。
先抛开看起来很多的grid属性,我们从自己的需求出发,看自己需要什么。网格内容在容器中怎么对齐?网格怎么划分?元素在网格内怎么对齐?怎么指定某个元素的特定位置?怎么实现一个元素占据多个格子?再结合下面这张图,应该会对grid属性的大致情况有一个了解。
至于具体的写法、工具方法、关键字,使用的时候去了解即可。CSS Grid 网格布局教程此教程已经很详细,不再重复。
1、圣杯布局
<div class="grid-container"> <div class="header"></div> <div class="left"></div> <div class="content"></div> <div class="right"></div> <div class="footer"></div> </div>
.grid-container { width: 1000px; height: 800px; display: grid; grid-template-columns: 200px 600px 200px; grid-template-rows: 60px 680px 60px; grid-template-areas: "header header header" "left content right" "footer footer footer"; } .header { background-color: #87CEFF; width: 100%; height: 100%; grid-area: header; } .left { background-color: #FFC1C1; width: 100%; height: 100%; } .content { background-color: #FFDAB9; width: 100%; height: 100%; } .right { background-color: #FFEC8B; width: 100%; height: 100%; } .footer { background-color: #AB82FF; width: 100%; height: 100%; grid-area: footer; }
2、水平垂直居中
<div class="grid-container"> <div class="grid-item"></div> </div>
.grid-container { width: 300px; height: 300px; border: 1px solid gray; display: grid; place-content: center; } .grid-item { width: 100px; height: 100px; background-color: #87CEFF; }
目前grid布局的唯一缺点就是兼容性问题,尤其是IE浏览器兼容性很差,需要根据具体业务场景选择是否使用。
Grid Layout各浏览器兼容情况