栅格布局的思想起源源自于印刷设计。栅格是用来将设计元素精确定位到页面上的的丈量工具。这种想法常常被用在网页上来进行内容组织和统一，提升用户的视觉体验。
网页设计刚起步的时候，设计和布局都是是相称大略的， 常日包含头部，侧边栏，内容区域和页脚。现在，随着网络的演化，网页的布局也变得更加繁芜，做网页设计师的人也随之增加。我们常常须要大量的内容区域，相应式设计，多页面模板设计，以及许多其他的。浮动和定位在实现这些设计的时候，是必不可少的。但浮动听起来大略，实际操作起来却很棘手。
但接下来，我们会先容一种大略的设计布局。随着CSS栅格布局的不断发展，成为设计师也会变得越来越随意马虎。
CSS栅格兼容性
作为一名设计师，须要理解网页设计的未来。CSS栅格布局将改变现有规则，为设计师处理头痛了许多年的定位。虽然目前还不是主流的做法，但是这是一件值得期待的事情。
在我们真的深入理解栅格布局之前，要强调的一件事，浏览器并不普遍支持， 希望这种事情办法在未来可以得到越来越多的浏览器支持。不过， 好是， 您可以轻松地考试测验利用CSS栅格布局，以及理解它是如何事情的。
在利用示例之前，请你确保你的浏览器支持。目前只有Internet Explorer 10+和 edge 支持。其他的浏览器通过一些手段也可以浏览，但由于它不是官网支持，以是你只能是不断的去考试测验。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”）如果你边利用Can I Use来查看栅格布局的兼容性，边看这篇文章，那么你就可以把稳到每个细节的不同。
当您在测试栅格布局的时候，你须要做几件事情帮助你精确地看到布局。利用Chrome查看，你须要启用“实验性网络平台功能”。如何启用呢？在Chrome 浏览器中打开chrome://flags 这个地址。当url 链接chrome://flags加载完毕之后，向下滚动页面，找到该选项，设置为“启用实验性网络平台功能”。
火狐大概可您查看栅格布局，通过“layout.css.grid.enabled”参数设置。开启方法类似于Chrome浏览器的解释。在Firefox浏览器中URL输入 about:config。向下滚动页面，设置为启用 “layout.css.grid.enabled” 。
如果你想立时开始利用CSS栅格布局，对付不支持它的浏览器还有一个变通方案。如果你熟习polyfills的想法，那已经有办理方案了。如果你不熟习polyfills，可以利用浏览器退却撤退，利用JavaScript的力量，许可当代的浏览器功能（例如CSS栅格布局）在旧的浏览器运行。
Polyfills超出本教程范围，但随着越来越多的设计师开始利用这项技能，更多的polyfill 技能将会呈现。如果你准备考试测验，这里是一个推举的 polyfill option。请务必阅读作者的文档，理解有关如何利用它的详细信息。
那么，在承诺100%利用CSS栅格布局之前，要确保利用的生产代码，做一些深入的测试。
CSS栅格布局基本知识
通过利用CSS，栅格布局将有助于您的网页内容的呈现。这里有一篇相对较新的定义的属性的CSS栅格布局规范 。这是学习栅格设计的一个很好的资源。CSS栅格设计有助于简化的东西，使创建布局更加随意马虎。想象一下，栅格作为一种构造，尺寸可以被定义。
栅格的组成
行(lines)
在上图中，有五条垂直线和三条水平线。线从1开始编号。示例中，垂直线从左至右，这取决于书写方向。如果书写方向是由右至左，顺序就颠倒过来。可以给线起名（可选），方便在CSS中引用。
轨道(tracks)
轨道是两条平行线之间的空间。在图中，有四个垂直轨道和两个水平的轨道。这是线和轨道的共同结果。 线是记录内容的出发点和终点。轨道是内容真实存在的位置。
单元格(cells)
单元格是水平和垂直轨道的相交处。图中有八个单元格。
面(areas)
单元格指定面的时候发挥浸染。面是矩形形状，可以超过多个单元格。像线一样，面也可以任意命名。如在图中的几个标签：“A”，“B”，和“C”。
创建栅格布局
用老方格纸，布局之前，先勾勒轮廓。
HTML栅格
<div class=\公众grid header\公众>Header</div>
<div class=\"大众grid sidebar\"大众>Sidebar</div>
<div class=\公众grid content\公众>Main Content</div>
<div class=\公众grid extra\"大众>Extra Content</div>
<div class=\"大众grid footer\"大众>Footer</div>
</div>
容器Container是非常主要的。容器内是用于显示网站的不同的内容块。内容块的顺序并不主要。接下来，我们将利用CSS将它们按照我们的布局显示。
CSS样式
HTML完成后，我们来写CSS。给container设置display:grid 或者 display:inline-grid. 如果你希望设置块级元素，那利用 display:grid ; 如果你希望设置成内联元素， 那利用display:inline-grid。想理解更多细节，可以查看文档
.container {
display: grid;
grid-template-columns: 0.25fr 15px 0.75fr;
grid-template-rows: auto 25px auto 25px auto 25px auto;
}
.grid {
background-color: #444;
color: #fff;
padding: 25px;
font-size: 3rem;
}
grid-template-columns和grid-template-rows属性用于指定行和列的宽度。这个布局定义了五列。15px是两个元素之间的间距。第三列占用0.25份的剩余空间。同样地，第五列占用0.75份的剩余空间。（疑问： 图中根本没有第五列啊，觉得作者写错了）
There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.
对付相应式布局这个规范是很便利的，如果利用像素，则会被限定去世。第一行利用grid-template-rows来表示，随着内容须要的变革而变革。设置padding 成 25 像素，与头部留有间隙。
元素看起来很紧凑，但再加一些规范，元素将初具规模。
这个例子先放置的头部，但元素位置可以按您喜好的任意顺序摆放。如果你想从页脚开始，也可以。
我们先从头部开始，从列1开始到列4结束，从行1开始到行2结束，CSS看起来就像这样：
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
您可能会把稳到侧边栏被压住了，我们无法看到它。我们须要重新排列一下。在这种布局,通过行的位置进行排列。以行作为标准。头部占一行和二行的位置，侧边栏，从三行开始， 到六行结束。 头部到第二行结束，侧边栏从第三行开始恰好可以显示到头部下面。要查看示例，请拜会该项目Codepen。
我们利用grid-column-start指定一个元素起始垂直线。在本例中,它将被设置为3。grid-column-end表示一个元素的结束垂直线。在这种情形下,这个属性就即是四。其他行值也用同样的办法设置。侧边栏的位置是存在的,它只是覆盖的内容区。
.sidebar {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: #a0c263;
}
紧张内容在第三列开始，第四列结束。侧边栏和内容区域的顶部对齐，以是他们都从grid-row-start第三行开始。你可能想让内容栏比侧边栏高很多。通过设置容器上的高度，如果400像素，这个时候，它就会比其它元素高很多。
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
末了两个内容区域是额外内容区域和页脚。
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #898989;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: #FFA500;
}
相应式上风
布局已经创建好了，彷佛很像一个“桌面”。那么平板电脑和移动设备怎么显示？CSS栅格布局加上媒体查询可以适应不同的屏幕尺寸。真正酷的是，你可以在这些不同的媒体查询范围里，改变内容区域。作为一个设计师，这意味着你选择什么是最适宜你的布局在不同的断点。例如，如果你想要将“次要内容”被放在“内容”区域之上，可以指定精确的行和列。
/ For mobile phones: /
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.extra {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.content {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #f5c531;
height: 400px;
}
通过设置成列1开始，列4结束，来设置成内容全宽。将“次要内容”显示在了“内容”之上。
CSS栅格布局是一种新型的布局办法。正如你所看到的，这种方法很随意马虎创建一个大略的页面布局去运行。上面这个大略的例子也可以为如何创建更繁芜的布局打下良好的根本。如果这个技能得到遍及，在设计各种设备和尺寸，布局大小自定义的时候，这个技能会是一个上风。
问切 wenqie（.cn），是切图网旗下关注用户体验，专注H5移动适配的品牌网站。
