grid网格布局，如何理解grid-template属性？定义行列信息

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在本文中，苏南大叔将要初步解读一下grid网格布局的grid-template属性，也就是定义网格具体有几行几列。这个属性也有两种用法，很容易混淆。本文说的是第一种用法，定义rows和columns。另外一种用法是定义areas，不在本文的讨论范围之内。

grid网格布局类似table布局。但是，grid的各种属性之间比较混乱。本文测试环境：win10，chrome。

再次强调，本文写的是grid-template的第一种用法，即定义rows和columns，不包括第二种用法，即定义areas的情况。

度量单位

本文中可能会出现如下度量单位：fr、px、auto、10%，后三者比较好理解。主要说一下新的单位fr。这个单位苏南大叔理解为“份儿”。1fr就是一份儿。那么，1fr 1fr 2fr中，一份儿就是25%。

但是在特例中，一份儿并不是大家所理解的那样，等于总宽度除以总份数。这种特例，待议。

目前，除了传统的px度量单位，苏南大叔还描述过如下单位：

• em/rem：https://newsn.net/say/em-vs-rem.html
• vw/vh: https://newsn.net/say/css-vw.html
• rpx: https://newsn.net/say/smartapp-rpx.html

测试用例

测试用例代码如下：

<div class="box">
  <div class="item">苏</div>
  <div class="item">南</div>
  <div class="item">大</div>
  <div class="item">叔</div>
</div>
<style>
  .box {
    display: grid;
    grid-template: 1fr 1fr/1fr 1fr;
    width: 300px;
    height: 300px;
    background: rgb(255, 255, 255);
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    font-size: 36px;
    color: white;
  }
  .item:nth-child(odd) {
    background-color: blue;
  }
</style>

grid-template-rows

这个grid-template-rows属性就是用于描述有几行的。只不过不是用数字描述。而是用上述度量单位来表述，如下所示：

grid-template-rows:1fr 1fr;       // 两行高度50%
grid-template-rows:1fr 1fr 1fr;   // 三行高度33.33%
grid-template-rows:auto;          // 全部高度自动
grid-template-rows:1fr 1fr auto;  // 三行，前两行高度50%，最后一行自动
grid-template-rows:1fr 1fr 100px; // 三行，最后一行高度100px，前两行剩下高度的50%
grid-template-rows:1fr 2fr;       // 两行，第一行高度33.33%，第二行高度66.67%
grid-template-rows:25% 50%;       // 两行，第一行高度25%，第二行高度50%

百分比直接换算成px像素，就摆脱了100%的限制，就比较好理解了。

grid-template-columns

这个grid-template-columns属性就是用于描述有几列的。只不过不是用数字描述。而是用上述度量单位来表述，如下所示：

grid-template-columns:1fr 1fr;       // 两列宽度50%
grid-template-columns:1fr 1fr 1fr;   // 三列宽度33.33%
grid-template-columns:auto;          // 全部宽度自动
grid-template-columns:1fr 1fr auto;  // 三列，前两列宽度50%，最后一列自动
grid-template-columns:1fr 1fr 100px; // 三列，最后一列宽度100px，前两列剩下宽度的50%
grid-template-columns:1fr 2fr;       // 两列，第一列宽度33.33%，第二列宽度66.67%
grid-template-columns:25% 50%;       // 两列，第一列宽度25%，第二列宽度50%

百分比直接换算成px像素，就摆脱了100%的限制，就比较好理解了。

grid-template

grid-template-rows和grid-template-columns合并起来写，就是grid-template属性。但是，反过来推断就不成立了。

由A可以推出B，由B不可以推出A，则A是B的充分不必要条件。

写法是这样的：

grid-template : [grid-template-rows] / [grid-template-columns]

如果没有写斜线“/”，那么就应该解析成[grid-template-areas]，这个就是后话了。

范例如下：

grid-template:auto / 1fr 1fr;                //  两列
grid-template:1fr 1fr / 1fr 1fr;             //  两行两列
grid-template:auto/ 1fr 1fr 1fr;             //  n行三列
grid-template:auto/ 1fr 1fr 2fr;             //  n行三列，最后一列占比50%，其它两列占比25%

特例

如果子元素数量小于等于在grid-template定义的网格数量，那么，这基本上么有问题。但是，如果css里面定义的数量小于真正的子元素数量呢？这个就是特例了。

适当的使用auto关键字，似乎是更好的选择。

格子多元素少的话，就按规则填充，只是有空余的位置。而元素多格子少的话，这个就是可能任意解释都成立了。目前按照谷歌浏览器的解释的话，是优先解释非fr的情况，然后剩余的实际位置再按照fr份数进行分割。

相关链接

grid-template还可以简写为grid。

• https://newsn.net/say/css-grid.html
• https://newsn.net/say/grid-auto-flow.html
• https://newsn.net/say/grid-auto-flow-dense.html

总结

grid布局，如果没有显式的定义grid-template，那么一般就是单行或者单列的。有隐式定义行列的情况，比如单独定义某个元素的位置是第二行或者第三列。定义了grid-template，也有可能定义的不是rows/columns，而是定义的更复杂的areas的情况。

听起来有些晕，对不。更多css的相关文章，请点击：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。