CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项)，你就可以轻松使用 Grid(网格) 布局。
　　简介
　　CSS Grid(网格) 布局(又称为 “Grid(网格)” )，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格(table)，然后是浮动(float)，再是定位(postion)和内嵌块(inline-block)，但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能(例如垂直居中)。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局(实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好)。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，只要我们一直在制作网站，我们就一直要讨论这些问题。
　　有两个主要因素激发了我创建本指南的灵感。第一个是 Rachel Andrew 出色的书籍 为 CSS Grid 布局做好准备。这本书对 Grid 布局做了全面，清晰的介绍 ，也是本指南的基础。我强烈建议你购买并阅读。另一个灵感来自 Chris Coyier 的 Flexbox 布局完整指南，这也是我学习 flexbox 首选的资源。这篇文章是帮助了很多人，这点从 Google “flexbox” 排名第一就可以看出来。你会发现那篇文章和我的文章有很多相似之处，为什么不跟随最好的文章呢?
　　本指南的目的是介绍存在于最新版本的规范中 Grid(网格) 概念。所以我不会覆盖过时的 IE 语法，而且随着规范的逐渐成熟，我会尽我最大的努力去更新这个指南。
　　基础知识和浏览器支持
　　首先，你必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似，网格项(grid items)的源(HTML结构)顺序无关紧要。你的 CSS 可以以任何顺序放置它们，这使得使用 媒体查询(media queries)重新排列网格变得非常容易。定义整个页面的布局，然后完全重新排列布局以适应不同的屏幕宽度，这些都只需要几行 CSS ，想象一下就让人兴奋。Grid(网格) 布局是有史以来最强大的 CSS 模块之一。
　　截至2017年3月，许多浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome(包括 Android )，Firefox，Edge，Safari(包括iOS)和 Opera 。 另一方面，Internet Explorer 10和11支持它，但是是一个过时的语法实现。 现在是时候使用 Grid 布局网页了!
　　这个浏览器支持 CSS Grid 的数据，来自 Caniuse ，你可以查看更多的细节。 数字表示支持以上功能的浏览器版本号。
　　桌面(Desktop) 浏览器

Chrome

Opera

Firefox

IE

Edge

Safari

57

44

52

11*(旧语法)

16

10.1

　　手机(Mobile) / 平板(Tablet)浏览器

iOS Safari

Opera Mobile

Opera Mini

Android

Android Chrome

Android Firefox

10.3

46

No

67

70

63

　　除了微软之外，浏览器厂商似乎还没有对 Grid(网格) 搞自己的一套实现(比如加前缀)，直到规范完全成熟。这是一件好事，因为这意味着我们不必担心学习多个语法。
　　在生产中使用 Grid 只是时间问题。 但现在是学习的时候了。
　　重要术语
　　在深入了解 Grid 的概念之前，理解术语是很重要的。由于这里涉及的术语在概念上都很相似，如果不先记住 Grid 规范定义的含义，很容易混淆它们。但是别担心，术语并不多。
　　网格容器(Grid Container)
　　应用 display: grid 的元素。这是所有 网格项(grid item)的直接父级元素。在这个例子中，container就是 网格容器(Grid Container)。

HTMl代码

[HTML] 纯文本查看 复制代码

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

　　网格项(Grid Item)

　　网格容器(Grid Container)的子元素(例如直接子元素)。这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。