CSS3中的Grid布局

Posted on
Grid布局最CSS3中非常便利的一种布局，其使用简单，功能强大，相信随着现代浏览器的逐渐普及，Grid布局在页面的全局布局中应用也会越来越广泛。

概述

Grid布局最CSS3中非常便利的一种布局，其使用简单，功能强大，相信随着现代浏览器的逐渐普及，Grid布局在页面的全局布局中应用也会越来越广泛。

顾名思义，Grid布局就是网格状的布局，在学习和使用这个布局的时候，我们可以先将要布局的容器先用横线和竖线画成一个一个的格子，然后根据我们再在每个格子中要放置相应元素，注意相邻的格子是可以合并的。

Grid布局相关的概念和基本属性

下图就是一个Grid布局，我们接下来根据这张图片一一学习Grid布局中的一些相关概念。

  1. 网格容器：网个容器是指设置了display属性为grid的标签。
1
2
3
.box {
    display: grid;
}

上图中，整个大的div就是一个设置上述css的容器，也被称为网个容器。

  1. 网格线：网格线是指组成网格的分界线，上图中白色的间隔就可以理解为网格线。

  2. 网格轨道：网格轨道是指组成网格的排或列（不包括网格线），比如上图中顶端和低端的金色横排，以及中间两部分天蓝色和一部分黄绿色共同组成的横排。

  3. 网格单元格：单个网格，左边和右边的天蓝色部分分别是一个网格单元格，中间的黄绿色部分是一个网格单元格，上下两部分金色区域分别占了三个网格单元格。

  4. 网格区域：网格区域是表示可以由多个网格单元格组成的区域，比如上图中的上下两个金色部分，各自就是由三个网格单元格组成的网格区域。

结合响应式设计的圣杯布局示例

HTML代码。

1
2
3
4
5
6
7
8
9
<body>
    <div class="bg">
        <header></header>
        <aside class="left"></aside>
        <aside class="right"></aside>
        <main></main>
        <footer></footer>
    </div>
</body>

CSS代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html,body { maring: 0px; }
.bg {
    /* vh表示视窗区域的百分比值 */
    height: 100vh;
    display: grid;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 150px 1fr 150px;
    grid-template-areas: "header header header"
                         "left   main   right"
                         "footer footer footer";
}
header { background-color: gold; grid-area: header; }
.left { background-color: grey; grid-area: left; }
.right { background-color: grey; grid-area: right; }
main { background-color: purple; grid-area: main; }
footer { background-color: gold; grid-area: footer; }

如下图所示。

总结

网格布局虽然使用起来非常方便，笔者也认为网格布局会是以后网页整体布局的主流布局实现方式之一，但是现阶段仍有一些浏览器不支持，所以如果需要兼容老版本的浏览器，建议慎用。