什么时候
grid-template-areas: "....... header header" "sidebar content content";
更改为:
grid-template-areas: "....... header header" "sidebar header content";
一切都崩溃了。
如何使用CSS Grid布局实现相同的效果?
body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-template-areas: "....... header header" "sidebar content content"; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .header { background-color: #999; } <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content</div> </div>
当使用带有该grid-template-areas 属性的ASCII艺术作品时,当前存在一个重要的限制: 命名网格区域必须是矩形 。
grid-template-areas
换句话说, 不允许使用同名的俄罗斯方块形状的网格区域 。
此行为在规范的两个部分中定义。
7.3。 命名区域:the grid-template-areas属性
the grid-template-areas
如果命名的网格区域跨越多个网格单元,但是这些单元不形成单个填充矩形,则声明无效。
在此模块的将来版本中,可能会允许非矩形或不连续区域。
9.放置网格项目
每个网格项目都有一个网格区域,即网格项目所占据的矩形网格单元集。
在第一个示例中,所有网格区域均形成矩形。因此,该规则有效。
在第二个示例中,该header区域形成非矩形形状。因此,该规则无效。
header
(请注意,句点(.)或一系列相连的句点(...)构成了一个 未命名的 网格区域,上面的规则不适用于该网格区域规范参考
.
...
幸运的是,网格提供了多种布局网格项目的方法。
而是grid-template-areas可以使用 基于行的放置 。
.wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-auto-rows: 100px; background-color: #fff; color: #444; } .header { grid-column: 2 / 4; grid-row: 1 / 3; } .sidebar { grid-column: 1 / 2; grid-row: 2 / 3; } .content { grid-column: 3 / 4; grid-row: 2 / 3; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .header { background-color: #999; } body { margin: 40px; } <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content</div> </div>
还 请注意,的所有字符串值grid-template-areas必须具有相同的列数