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浏览器兼容性很差,需要根据具体业务场景选择是否使用。