CSS 网格布局(grid)-模板区域(三)

• 在上文中，我们使用网格线实现了跨轨道放置元素, 我们所有的操作都是基于网格线的
• 这篇文章我们将会元素的方式实现跨轨道放置元素

网格区域命名

• 还记得 grid-area: 1 1 2 2 吗? 根据边线确定一个元素的大小,
• 在这里也可以用来命名区域. 如: grid-area: one， one 为自定义的区域名称
• 我们可以通过 grid-template-areas 来使用

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

.one {
    grid-area: one;
}
/* ... */
.five {
    grid-area: five;
}

• 在定义 grid-template-areas 时, 为了方便阅读可以适当的增加空格, 保持首字母对齐以增加可读性
• 同样我们也可以用这样的方法实现纵向的"合并单元格"
• 用区域名连接起来的区域必须是矩形的，目前还不能创建 L 形的区域，尽管规范中指出未来的版本可能会提供这项功能。

空白的网格单元

• 如果需要实现空的网格单元, 留出空单元的方法是使用句点符，.

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

简写 grid-template

• grid-template 属性可同时设置以下属性：
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

grid-template:
    "one  .    ."     minmax(60px, auto)
    "two  two  three" minmax(100px, auto)  
    "four five five"  minmax(120px, auto)
    / 1fr 1fr 1fr;

简写 grid

• grid 简写更进一步，它包含了与隐式网格相关的属性，它可以同时设置以下属性：
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

小结

• 使用 grid-area 属性命名网格项目，然后在 grid-template-areas 属性中引用该名称
• 留出空单元的方法是使用句点符，即：.
• 简写 grid-template 和 grid

相关文档

• CSS 网格布局(grid)-基本概念(一)
• CSS 网格布局(grid)-线的定位(二)

参考文档

• developer.mozilla.org/zh-CN/docs/…