Grid网格布局简单梳理

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各浏览器兼容情况