带有css-grid

时间:2018-02-04 12:17:43

标签: html css layout css-grid

complete-guide-to-grid on css-tricksgrid 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相同的位置在顶部。此外,模式不会重复,因此我们最终只有两行。

然后我考虑了嵌套网格,在nx下添加了另一个网格。但这会打败"布局"诺言,所以我决定反对。

我相信我要么从根本上误解了区域,要么在没有嵌套网格的情况下我不想做什么。任何输入或使用css-grid的示例双轴布局都将非常感激!

1 个答案:

答案 0 :(得分:0)

由于您使用的是表格数据,<table>元素可能比尝试使用css网格更合适。