css中的网格布局，你学会了吗

相信很多前端同志对弹性盒（Flex）布局很熟悉，但是对于网格（Grid）布局很陌生，甚至在项目中从来没有用到过。今天就带大家学习一下网格布局是如何玩的。

如果你懒的动手写代码，或者本地创建项目，博主贴心的为你准备了代码预览地址，你可以一边调试一边预览效果。

1. 什么是网格布局

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column）与行（row） ，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter） 。

也就是下面这张图：

我们一般会根据我们的设计图来决定网格的布局长什么样子。

接下来我们从一个基础的网格系统开始学起来。

2. 自定义网格布局

布局如下：

<h1>Simple grid example</h1> <div class="container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div>

2.1. Gird

首先，你要设置网格布局，必须把display设置为grid。

css

.container { display: grid; }

2.2. grid-template-columns

此时的布局并没有任何变化，我们需要通过grid-template-columns设置列的宽度，给个三列，每列200px吧。

css

.container { display: grid; grid-template-columns: 200px 200px 200px; }

此时，页面效果如下：

2.3. gap

使用 grid-column-gap(en-US) 属性来定义列间隙；使用 grid-row-gap(en-US) 来定义行间隙；使用 grid-gap(en-US) 可以同时设定两者。

修改代码：

css

.container { display: grid; grid-template-columns: 200px 200px 200px; grid-gap: 20px; ga