CSS网格动态行和列答案

【问题标题】：CSS grid dynamic rows and columnsCSS网格动态行和列
【发布时间】：2019-09-06 12:23:17
【问题描述】：

我想使用 CSS 网格创建一个表格该表采用以下形式（绘制得很差，但可以传达信息）：

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

除了 Header 单元格之外的所有内容都是动态的，例如我可能会从数据中获取 7 行和 3 列。

如何使这个表动态化？

对于我写的标题栏：

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

对于我添加的标题行：

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

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

【问题讨论】：

您尝试的代码会有所帮助。
您总是将它们设置为 145px 宽度。您还可以像这样设置动态宽度：grid-template-columns: repeat(auto-fill, minmax(145px, 1fr))
CSS-Grid 不是表格的替代品。我建议你使用正确的工具来完成这项工作。
如果你想让表格动态化，那么你必须使用表格，而不是 css 网格

标签： html css html-table css-grid

【解决方案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) 放置第一行，
使用隐式网格将行放在标题下方 - 使用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>

【讨论】：