html - 带有 css-grid 的两轴表格布局

Question

类似 complete-guide-to-grid on css-tricks 的资源或 grid by example很棒，但我不知道如何构建双轴表格布局。

此布局的数据是一个简单的每周时间表，其中每一天都有一个 0-n 类别，每个类别都有 0-n 道菜。数据看起来像这样(伪代码):

DAY: { CATEGORY: [DISH] }

例如

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

现在，我花了数年嵌套 div 来构建布局，我尝试设计这个“布局”，就像 css-grid 的口头禅一样，以一种方式构建 html与目标布局分离。参见 this codepen示例结构。

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

.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 下添加另一个网格。但这违背了“布局”的 promise ，所以我决定反对。

我相信我要么从根本上误解了区域，要么没有嵌套网格就无法实现我正在尝试做的事情。任何输入，或使用 css-grid 的示例双轴布局将不胜感激!

Answer 1

由于您正在处理表格数据 a <table>元素可能比尝试使用 css 网格更合适。