CSS Grid Layout一些有趣的事情（2）

特别声明：此篇文章内容来源于@MANUEL MATUZOVIC的《Another Collection of Interesting Facts About CSS Grid》一文。

去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。

当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

理解的快捷方式是如何工作的

有时候，阅读和理解规范是非常困难的。例如，我花了很长时间才理解如何正确使用快捷方式。该规范声明的有效值有：

|/ [ auto-flow && dense? ]? | [ auto-flow && dense? ]? /

如果你花时间或者你有阅读规范的经验，你就能理解它。我尝试了几种组合，但都失败了。最终帮助我的是规范中的一个注释：

注意：你只能在单个网格声明中指定显式或隐式网格属性。

@Rachel Andrew有一系列的文章，使用CSS网格作为一个例子，解释了如何阅读规范。

因此，我们可以使用网格简写来指定大量的东西，但不是所有的都同时使用。这里有一些例子。

使用事实上在用

属性是，和三个属性的简写方式。事实上，我们也可以使用的简写来做相同的事情。

grid:"one one"200px"two four""three four"/1fr2fr;

上面的代码等同于下面的代码：

grid-template-areas:"one one" "two four" "three four";

grid-template-rows:200px;

grid-template-columns:1fr 2fr;

这个简写创建了三行两列的一个网格，其中有四个命名的网格区域。第一行的显式高度为，而第二行和第三行隐式高度为。第一列的宽度为，第二列的宽度为。

想知道更多关于显式和隐式网格的区别吗？看看这篇文章。

如果不需要，我们不需要指定区域。我们可以使用的简写来定义显式的行和列。下面两个代码片段基本上是在做相同的事情：

grid-template-rows:100px 300px;

grid-template-columns:3fr 1fr;

/* 等同于 */

grid:100px300px /3fr1fr;

处理隐式行和列

可以使用简写来指定，但是它并不像我们预期的那样工作。我们不只是在声明中添加或关键词。相反，我们必须在 的一侧使用关键词。

如果位于的左侧，那么的简写中的值为和创建显式的列。

grid:auto-flow / 200px 1fr;

/* 等同于 */

grid-auto-flow: row;grid-template-columns:200px1fr;

如果位于的右侧，那么的简写中的值为和创建显式的行。

grid:100px 300px / auto-flow;

/* 等同于 */

grid-template-rows:100px300px;grid-auto-flow: column;

我们还可以将隐式的网格轨道尺寸大小与关键词一起使用，分别给或设置为指定的值。

grid:100px 300px / auto-flow 200px;

/* 等同于 */

grid-template-rows:100px300px;grid-auto-flow: column;grid-auto-columns:200px;

Edge中的查询功能

使用查询功能检查对CSS Grid的支持是非常有用的，因为所有支持的浏览器都能理解。这意味着，我们可以检查浏览器是否支持新的或旧的规范，或者两者都支持。你肯定会问，两个都支持？从Edge 16开始，Edge不仅支持新规范，而且还支持旧规范。

所以，如果你想区域是否支持新规范，你可以像下面这样使用查询功能：

这里有一个小示例，它显示了在浏览器中打开的查询特性的触发器。

简单提一下，不要使用浏览器嗅探的特性查询，因为浏览器检测很糟糕。

指定每列中项目的确切数

网格对于页面布局来说非常有用，但是它在组件级别上也非常有用。我最喜欢的例子之一是能够在多列组件中指定每列的确切的列表数。

假设我们有一个11项的列表，我们想在每四个项目之后添加一个新的列。首先要做的事情是在它们的父元素上显式的声明。默认情况之下，它会依次填充每一行，并在必要时添加新的行。如果我们设置为，网格将依次填充每个列，这正是我们想要的。我们要做的最后一件事是指定每个列的列表项数。这可以通过属性显式定义尽可能多的行来实现。我们可以通过使用关键词来显式地设置每一行的高度，或者让它们与内容一样大。

如果我们必须为每列设置五个列表项，我们只需要在网格轨道后添加新的网格轨道，或者使用函数，只需要将第一个参数更改为你所需的值，比如：。

使用CSS Grid实现Sticky footers效果

在CSS中创建Sticky Footer效果有很多方法。有一些方法很简单，也有一些方法也很复杂。假设我们有一个类名为、和的页面结构：

HEADERMAINFOOTER