CSS网格动态行和列

Question

我想使用CSS网格创建表格 该表的格式如下（绘制效果差，但会传达信息）：

我会解释。假设标头单元格大小为2x / 2y。每个标题行的像元为x / 2y，每个标题列的像元为2x / y。内部表格单元格大小（红色）为x / y。

除“标头”单元格外的所有其他内容都是动态的，例如，我可能从数据中获得7行3列。

如何使该表动态化？

对于我写的标题列：

  grid-template-rows: repeat(auto-fill, 145px);

，对于我添加的标题行：

  grid-template-columns: repeat(auto-fill, 145px);

但是我仍然缺少一些东西。如何根据数据和我为每个单元格编写的大小限制使该表变为动态表？

Answer 1

尽管以下内容不是很实用或有用，但出于好奇我想尝试一下：

• 您问题中的x和y已保存为CSS变量，
• 使用grid-template-columns类似于您所做的，但添加第一列宽度，例如grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x))，
• 使用grid-template-rows: calc(var(--y) * 2)放置第一行，
• 使用隐式网格将行放在 header 下方-使用grid-auto-rows: var(--y)。

请参见下面的演示

:root {
  --y: 75px;
  --x: 75px;
}

.container {
  display: grid;
  grid-template-columns: calc(var(--x) * 2) repeat(auto-fill, var(--x));
  grid-template-rows: calc(var(--y) * 2);
  grid-auto-rows: var(--y);
}

.container > div {
  border: 1px solid red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>