complete-guide-to-grid on 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
现在,花了多年时间嵌套div
来构建布局,我试图设计这个" layout-in",就像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
下添加了另一个网格。但这会打败"布局"诺言,所以我决定反对。
我相信我要么从根本上误解了区域,要么在没有嵌套网格的情况下我不想做什么。任何输入或使用css-grid的示例双轴布局都将非常感激!
答案 0 :(得分:0)
由于您使用的是表格数据,<table>
元素可能比尝试使用css网格更合适。