大家好，我是讯享网，很高兴认识大家。



by Chris House  译者：若愚老师 想要更好的阅读体验可在饥人谷技术博客 查看原文 看完本篇，推荐看 CSS Grid 系列(下)-使用Grid布局构建网站首页

http://chris.house/

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

flexbox ：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

引言

CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。

https://abookapart.com/products/get-ready-for-css-grid-layout

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有两个东西，启发我写这篇指南。 第一个是雷切尔·安德鲁（Rachel Andrew）的书为CSS Grid布局准备。 这本书对网格布局做了彻底、清晰的介绍，也是是整篇文章的基础，我强烈建议你购买并阅读他的书。 我的另一个重要灵感是Chris Coyier的Flexbox完全指南，当需要查阅 flexbox 的一切资料时我就会找这篇文章。 这篇文章帮助了很多人学习 Flex 布局，也是 Google 上搜索“flexbox”关键字排名第一的文章。你会发现他的文章和我的很多相似之处，有最好的范例在那放着为什么咱不偷师学着写呢？

本指南的目的是介绍网格概念，因为它们存在于最新版本的规范中。 因此我不会覆盖过时的IE语法，而且随着规范的成熟，我会尽最大努力保存更新本指南。

基础知识以及浏览器支持情况

一开始你需要使用把容器元素定义为一个网格，使用和设置列和行大小，然后使用 和 把它的子元素放入网格。 与flexbox类似，网格子元素的原始顺序不重要。 你的可以在 CSS 里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。 想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。 网格是有史以来最强大的CSS模块之一。

截至2017年3月，许多浏览器都提供了原生的、不加前缀的对CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但需要使用过时的语法。 Edge浏览器已经宣布将支持标准的Grid语法，但暂未支持。

浏览器支持的详细数据可在Caniuse查看。其中里面的数字表示该版本以上的浏览器支持Grid。

Caniuse：https://caniuse.com/#feat=css-grid

桌面浏览器

移动端 / 平板

除了微软之外，浏览器制造商在 Grid 规范完全落地以前似乎并没有放手让 Gird 野生也长的打算。 这是一件好事，这意味着我们不需要再去学习各种浏览器兼容版本的旧语法。

在生产环境中使用Grid只是时间问题，但现在是我们该学习的时候了。

重要术语

在深入了解网格的概念之前，理解术语是很重要的。 由于这里所涉及的术语在概念上都是相似的，如果不先记住它们在网格规范中定义的含义，则很容易将它们彼此混淆。 但是不用太担心，这些术语并不多。

Grid Container

设置了  的元素。 这是所有 grid item 的直接父项。 在下面的例子中， 就是是 grid container。

Grid Item

Grid 容器的孩子（直接子元素）。下面的  元素就是 grid item，但 不是。

Grid Line

这个分界线组成网格结构。 它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。 下面例中的黄线就是一个列网格线。

Grid Track

两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。 下面是第二行和第三行网格线之间的网格轨道。

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 下面是行网格线1和2之间以及列网格线2和3的网格单元。

Grid Area

四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。 下面是行网格线1和3以及列网格线1和3之间的网格区域。

讯享网

Grid 属性列表

Grid Container 的全部属性

Grid Items 的全部属性

父容器(Grid Container)的属性

display

将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。

值:

注意：, , , 以及  对一个 grid container 没有影响

grid-template-columns / grid-template-rows

使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。

例子:

(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：

但你可以给网格线指定确切的命名。 注意中括号里的网格线命名语法：

需要注意的是，一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：row1-end 和 row2-start：

如果你的定义中包含重复的部分，则可以使用 符号来简化写法：

上面的写法和下面等价：

“fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：

自由空间是在排除所有不可伸缩的 grid item 之后计算得到的。 在下面的示例中，fr单位可用的自由空间总量不包括50px:

grid-template-areas

通过引用 属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。

值：

举例：

这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。

你的声明中的每一行都需要有相同数量的单元格。

您可以使用任意数量的相邻的来声明单个空单元格。 只要这些点号之间没有空格，他们就代表了一个单一的单元格。

需要注意的是你不是在用这个语法命名网格线，而是在命名区域。 当你使用这种语法时，区域两端的网格线实际上是自动命名的。 比如，如果网格区域的名称是foo，那么区域的起始的行网格线和列网格线名称是 foo-start，并且区域终点的行网格线和列网格线名称是 foo-end。 这意味着某些网格线可能有多个名称，比如上面的例子中最左边的一条网格线有三个名字：header-start，main-start 和 footer-start。

grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

值：

它也可以使用一个更复杂但相当方便的语法来指定这三个值。 一个例子：

以上等价于：

由于 grid-template 不会重置隐式网格属性（，和），而这可能是大多数情况下你想要做的。因此建议使用属性来代替。

grid-column-gap / grid-row-gap

指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。

值：

举例：

只能在列/行之间创建缝隙，而不是在外部边缘创建。

grid-gap

grid-row-gap 和 grid-column-gap 的缩写

Example:

如果没有指定 grid-row-gap，则会被设置为与 grid-column-gap 相同的值。

align-items

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：

举例:

也可以通过给单个 grid item 设置属性来达到上述效果。

justify-content

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。

值：

举例：

PS. 由于B站只能放100张图，所以分了2篇放哦！

本文译者若愚，欢迎进群与我探讨技术（加小圆微信：xiedaimala03）    

未经同意禁止转载，转载请联系本人并加上版权声明和本文链接。