带你入门 CSS Grid 布局

前言

三月中旬的时候，有一个对于 CSS 开发者来讲很重要的消息，最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦。没错：咱们如今就能够在最流行的两大浏览器上玩转 CSS Grid 啦 ~(≧▽≦)/~

为何 CSS Grid 很重要？

由于 CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制咱们眼前屏幕上页面的显示效果。这意味着咱们终于能够摒弃多年的各类 hack 和 trick 了，CSS Grid 布局不只仅可使复杂的布局和精美的排版成为可能，并且还可使其变的干净利落可维护。

经过使用 CSS Grid，Web开发变得更加简洁且对开发者更加友好了 :-D 。那么 Grid 是如何工做的咩？有些教程事无巨细，可是我认为咱们应该从最基础的知识学起。下面咱们将会实现一个比较简单的小例子，即在一个页面上放置一串字母。

在开始前，咱们先添加几个标签：

<div class="wrapper">
    <div class="letter">
        A
    </div>
    <div class="letter">
        B
    </div>
</div>

首先，咱们使用 font-size 和 color 设置这些字母的字体和颜色，而后使用诸如 align-items 和 justify-content 之类的 flexbox 属性将其居中。CSS Grid 没有替换 flexbox 属性，尽量保留了它们的功能。咱们甚至能够将这些属性与 CSS Grid 结合。可是如今先让咱们回到这个 demo：

在上面这个例子中，一个大的 div 又包含着两个 div ，它们默认属性是 display: block。接下来咱们用 Grid layout 设置父类元素：

.wrapper {
  display: grid;
}

在这我放一下完整的 HTML 和 CSS 代码：

<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
</div>

body,html {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
}

.letter {
  background-color: #0069b3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 70px;
  color: white;
  line-height: 1;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
  font-weight: 200;
  cursor: pointer;
  transition: all .3s ease;
}

则显示结果以下：

如今你可能看到彷佛没什么变化。为何这样呢？这不像设置 display: inline-block; 或者 display: inline; ，当咱们把布局设为网格布局是不会发生很明显的变化。事实上，想让咱们的 grid 起做用，首先须要给它设置一个确切的行数和列数。在这个例子中，咱们可让两个字母并排排列：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

让咱们拆解一下上面的代码。首先咱们用 grid-template-columns 建立了一个两列的网格，若是你之前没见过这样的，那 1fr 可能看起来比较奇怪 ，但它是有效的 CSS 单元，能够将每一列列为咱们网格的一小部分。在这个例子中，意味着让两列等宽。

效果以下：

看见效果了就开心了吧，哈哈。可是看到两列之间的黑线了吗？这是 wrapper 勾勒的每一个字母 div 的背景，由于咱们将 grid-column-gap 设置为了 1px。一般，咱们会设置更大的距离，尤为是对于两个相邻的文本框来讲。但在本例中，1px 就足够了。

若是咱们再添加两个新字母会怎样呢？咱们应该怎么改变布局？

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>

看吧，加两个字母以后也没啥神奇的效果。加两个字母对网格没什么影响，为何呢？由于咱们已经将其设置成了两列，因此这两个字母的 div 直接被放在了它们下面，而且正好是 1fr宽：

可是如今我有一个疑问啊，为啥字母 A、C 之间以及 B、D 之间没有 1px 的距离╭(╯^╰)╮
由于 grid-column-gap 只用于列，咱们刚才作的是在网格布局中增长了一行。那就必须使用 grid-row-gap 才能看到想要的效果：

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

如今咱们已经建立好了一个一行一列的网格布局，因此接下来咱们就得改变标记了。可是咱如今再挖掘下列的好玩的地方。若是给 grid-template-columns 属性添加另外一个值会有啥变化？像这样：

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

啊哈，这就添加了一个新的列啊。咱们如今也能够清晰地看见 wrapper 的背景，由于如今那没东西显示：

若是咱们改变 fr，那一个非对称的网格布局就搞出来了。假如咱们想让网格的第一列是其余两列的三倍：

这会使A和D两列的宽度大于其余两列：

好玩吧？咱们不必在担忧负边距或者网格列的完美百分比。咱们能够轻松地作很复杂的网格布局，而不用像之前那样用数学来算...
如今咱们只须要给 grid-template-columns 属性添加一个新的值，一个网格列就奇迹般地出现了。

你可能会问，那=响应式网格怎么实现？那其实也很简单。好比咱们默认想要显示为 2 列，若是屏幕为 500px 的时候咱们想让其显示为 3 列，若是屏幕再大点，咱们要4列。只须要这样写：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

确保在你能用电脑在新窗口打开下面这个 Demo 连接-Demo，来试试改变浏览器窗口大小，看看响应式效果。

grid-template-columns 属性比本文展现的要更复杂，可是本文是很好的一个起点。接下来咱们会学习 CSS Grid 中真正的革命性意义的属性： grid-template-rows

看下面的一小段代码，结合咱们已经学的知识，搞明白这个新属性能干啥：

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

咱们如今能够设置行高之间的关系。若是咱们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的3倍：

这可能看起来很简单，之前咱们从没真正作到过这一点。咱们老是不得不在一个特定元素上设置最小高度或者改变类名。咱们之前从没以如今这样的方式建立过行之间的关系，这就是 CSS Grid 强大之处。

有了这些小知识和一些新属性，咱们能够建立很是复杂的布局，不对称网格和响应式网格只是冰山一角。目前为止，只是对 CSS Grid 的初探，还有不少没有谈到的。可是我以为 Jen Simmons 在写 Grid 的时候描述的最好：

咱们要一直探索 CSS Grid，直到搞清楚它想作的是什么，它能勉强作什么和它作不了什么。设计师可能永远不会学 CSS 的代码，可是要足够了解 CSS 才能更好地理解咱们的艺术媒介（artistic medium）。

固然，上面的代码起初看起来会有些奇怪。可是我想表达的意思是：咱们再也不须要使用臃肿的 CSS 框架，也不用管一大堆繁琐的布局。这就是 CSS Grid 真正让我兴奋的地方，它让咱们以一种全新的方式看界面的显示。

咱们不只须要学习一大堆新属性，还要从新思考咱们之前所学的东西。因此 CSS Grid 不只仅是一个规范，它自己就是一个奇怪的哲学。

让咱们一块儿来探索吧！

浏览器支持状况

绿色表示在列出的版本（及以上）的彻底支持。黄色表示部分支持。红色表示不支持。有关完整的浏览器支持详情，请参阅 Caniuse.

相关学习资源连接

• Jen Simmons

• Rachel Andrew

• Grid Inspector Tools in Firefox is super handy

• Complete Guide to Grid

 

原文：Getting Started with CSS Grid
做者：ROBIN RENDLE

欢迎你们在评论区留下你的想法和感觉！

---

欢迎你们关注知乎专栏：全栈成长之路

文章保质保量 (づ￣3￣)づ╭?～

也欢迎你们加入学习交流QQ群：637481811

本文首发于个人 我的网站 LeviDing ，更多内容欢迎关注个人我的网站。
欢迎扫描上方二维码关注 公众号: LeviDing 订阅实时动态。