经过css格子布局一个简单的页面

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

网页设计刚起步的时候，设计和布局都是是至关简单的， 一般包含头部，侧边栏，内容区域和页脚。如今，随着网络的演变，网页的布局也变得更加复杂，因此就出现了像切图网 、切版这样专门作前端的公司。咱们常常须要大量的内容区域，响应式设计，多页面模板设计，以及许多其余的。浮动和定位在实现这些设计的时候，是必不可少的。但浮动听起来简单，实际操做起来却很棘手。

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

 

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

翻译：http://www.wenqie.cn/css-grid-layouts-how-to/