像css-tricks的完整网格指南或grid by example这样的资源非常好，但我无法弄清如何构建一个双轴表格布局。
该布局的数据是一个简单的每周计划表，每天有0-n个类别，每个类别有0-n道菜。 数据看起来像这样（伪代码）：
DAY: { CATEGORY: [DISH] }
e.g.
monday: { a: [1, 2], b: [6], d: [5] },
tuesday: { b: [25], e: [0] },
...
friday: { a: [10], b: [9] },
布局应该像这样（请注意左上角为空）：
. MO TU WE TH FR
A a1 a10
a2
B b6 b25 b9
D d5
现在，经过多年的使用
来构建布局，我尝试按照css-grid的口号设计这个“内部布局”，以一种与目标布局解耦的方式组织HTML。请参见此CodePen以获取示例结构。
这个“效果”虽然可以达到，但是我需要为表格中的每个单元格创建一个类，这非常愚蠢。
这样做是行不通的。将
然后，我考虑嵌套网格，在
我认为我要么基本上误解了区域，要么我想做的事情没有嵌套网格就不可能实现。如果有任何建议或使用CSS Grid实现两轴布局的示例，将不胜感激！
我的第一个尝试是使用grid-areas，如下所示：
.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 Grid实现两轴布局的示例，将不胜感激！
grid-template-areas只是其中一种方法，在某些情况下并不适用。有关示例，请参见我的答案此处和此处。 - Michael Benjamin