一尘不染

具有ASCII艺术的网格模板区域不起作用

css

什么时候

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>

阅读 247

收藏
2020-05-16

共1个答案

一尘不染

当使用带有该grid-template-areas 属性的ASCII艺术作品时,当前存在一个重要的限制:
命名网格区域必须是矩形

换句话说, 不允许使用同名的俄罗斯方块形状的网格区域

此行为在规范的两个部分中定义。

7.3。 命名区域:the grid-template-areas属性

如果命名的网格区域跨越多个网格单元,但是这些单元不形成单个填充矩形,则声明无效。

在此模块的将来版本中,可能会允许非矩形或不连续区域。

9.放置网格项目

每个网格项目都有一个网格区域,即网格项目所占据的矩形网格单元集。

在第一个示例中,所有网格区域均形成矩形。因此,该规则有效。

grid-template-areas:
       "....... header  header"
       "sidebar content content";

在第二个示例中,该header区域形成非矩形形状。因此,该规则无效。

grid-template-areas:
       "....... header  header"
       "sidebar header content";

(请注意,句点(.)或一系列相连的句点(...)构成了一个 未命名的
网格区域,上面的规则不适用于该网格区域规范参考


幸运的是,网格提供了多种布局网格项目的方法。

而是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必须具有相同的列数

2020-05-16