Html 具有css网格的双轴表格布局

像or这样的资源非常好，但我不知道如何构建双轴表布局

此布局的数据是一个简单的每周时间表，其中每天有一个

0-n

类别，每个类别有

0-n

盘子。数据如下所示（伪代码）：

e、 g

布局应如下所示（注意左上角的空白）：

现在，花了数年的时间嵌套

div

s来构建布局，我试图设计这个“布局”，就像css网格的咒语一样，以一种与目标布局解耦的方式构造html。有关示例结构，请参见

我的第一次尝试是使用网格区域，如下所示：

.grid {
  grid-template-areas:
    ". 1  2  3  4  5"
    "a a1 a2 a3 a4 a5"
    "b b1 b2 b3 b4 b5";
    // ...
}

这个“有效”，但现在我必须为表中的每个单元格创建一个类，这很愚蠢

然后我尝试为每个轴创建区域，为中心单元格创建区域：

.grid {
  grid-template-areas:
    ". n n n n n"
    "s x x x x x";
}

这是行不通的。将

x

分配给每个单元格只需将它们堆叠在第一个

x

列/行的顶部，这与

n

顶部相同。而且，模式不会重复，因此我们只得到两行

然后我考虑嵌套网格，在

n

和

x

下添加另一个网格。但这违背了“布局在”的承诺，所以我决定反对它

---

我认为我可能从根本上误解了某些方面，或者如果没有嵌套网格，我想做的事情是不可能的。任何输入或使用css网格的双轴布局示例都将不胜感激

由于您使用的是表格数据，

元素可能比尝试使用css网格更合适。

请注意，网格规范提供了设置网格区域、调整网格项目大小和对齐网格项目的多种方法。使用

网格模板区域

只是一种方法，在某些情况下并不合适。有关示例，请参见我的答案和。对于标记的结构，我同意。为了设计表格数据的样式，我仍然需要使用css，这里css网格承诺不管标记结构如何都能工作，这就是为什么我要使用它。

. MO  TU  WE  TH  FR
A a1              a10
  a2
B b6  b25         b9
D d5

.grid {
  grid-template-areas:
    ". 1  2  3  4  5"
    "a a1 a2 a3 a4 a5"
    "b b1 b2 b3 b4 b5";
    // ...
}

.grid {
  grid-template-areas:
    ". n n n n n"
    "s x x x x x";
}