grid布局浏览器兼容_CSS Grid 布局实用性与局限（“2017的影集”失败经验总结）-新闻详情...

CSS Grid 布局实用性与局限(“2017的影集”失败经验总结)

发布时间：2017-12-28责任编辑：朱明 浏览：1220

前段时间，设计组(TBUXD)应领导要求，把2017年活动游玩和生日聚餐等一系列活动的留影整合设计一下放在官网网站，我们尝试了新的小技术方法--GRID的写法--，多年平稳的开车技术结果直接翻车，导致样式重构。但我们从未放弃对此的探索之心。因为它有可能是以后的趋势哟(*￣︶￣)。

①为什么 CSS Grid 很重要？

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

通过使用 CSS Grid，Web开发变得更加简洁且对开发者更加友好了 :-D 。

首先，我们使用 font-size 和 color 设置这些字母的字体和颜色，然后使用诸如 align-items 和 justify-content 之类的 flexbox 属性将其居中。CSS Grid 没有替换 flexbox 属性，尽可能保留了它的功能。我们甚至可以将这些属性与 CSS Grid 混用在上面这个例子中，一个大的 div 又包含着两个 div ，它们默认属性是 display: block。接下来我们用 Grid layout 设置父类元素：

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

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

但是看到两列之间的黑线了吗？这是 wrapper 勾勒的每个字母 div 的背景，因为我们将 grid-column-gap 设置为了 1px。通常，我们会设置更大的距离，尤其是对于两个相邻的文本框来说。但在本例中，1px 就足够了。

例如我们在添加2个新的字母

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

A、C 之间以及 B、D 之间没有 1px 的距离？╭(╯^╰)╮ 因为 grid-column-gap只用于列，我们刚才做的是在网格布局中增加了一行。那就必须使用 grid-row-gap 才能看到想要的效果

现在我们已经创建好了一个一行一列的网格布局，所以接下来我们就得改变标记了。但是咱现在再挖掘下列的好玩的地方。如果给 grid-template-columns 属性添加另一个值会有啥变化？像这样：

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

我们没必要在担心负边距或者网格列的完美百分比。我们可以轻松地做很复杂的网格布局，而不用像以前那样用数学来算... 现在我们只需要给 grid-template-columns 属性添加一个新的值，一个网格列就奇迹般地出现了。

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

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

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

我们现在可以设置行高之间的关系。如果我们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的 3 倍：

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

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

上面的代码起初看起来会有些奇怪。但是我想表达的意思是：我们不再需要使用臃肿的 CSS 框架，也不用管一大堆繁琐的布局。这就是 CSS Grid 真正让我兴奋的地方，虽然说浏览器对它的支持让我们感到心凉(谷歌，火狐，Safari都支持了，咱们国内标榜的浏览器一个也不支持，最后还是要脱鞋)

最后附图各个浏览器的支持情况一张ヾ(￣▽￣)Bye~Bye~

项目设计组   供稿