如何使用CSS栅格布局创建一个简单页面布局

原文链接： https://getflywheel.com/layout/css-grid-layouts-how-to/

栅格布局的思想起源源自于印刷设计。栅格是用来将设计元素精确定位到页面上的的测量工具。这种想法经常被用在网页上来进行内容组织和统一，提升用户的视觉体验。



网页设计刚起步的时候，设计和布局都是是相当简单的， 通常包含头部，侧边栏，内容区域和页脚。现在，随着网络的演变，网页的布局也变得更加复杂，做网页设计师的人也随之增加。我们经常需要大量的内容区域，响应式设计，多页面模板设计，以及许多其他的。浮动和定位在实现这些设计的时候，是必不可少的。但浮动听起来简单，实际操作起来却很棘手。

但接下来，我们会介绍一种简单的设计布局。随着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="container">
<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栅格布局是一种新型的布局方式。正如你所看到的，这种方法很容易创建一个简单的页面布局去运行。上面这个简单的例子也可以为如何创建更复杂的布局打下良好的基础。假如这个技术获得普及，在设计各种设备和尺寸，布局大小自定义的时候，这个技术会是一个优势。