Html CSS网格动态行和列

我想使用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);

---

但我还是错过了一些东西。如何根据数据和我为每个单元格编写的大小限制使此表成为动态表？

尽管下面的内容不太实用或有用，但出于好奇我还是会尝试一下：

• 您问题中的

  x

  和

  y

  已保留为CSS变量
• 使用

  网格模板列

  类似于您所做的操作，但添加了第一列宽度，如

  网格模板列：计算（var（--x）*2）重复（自动填充，var（--x））

• 使用

  网格模板行放置第一行：计算（var（--y）*2）

• 使用隐式网格将行放置在标题下方-使用

  网格自动行：var（--y）

请参见下面的演示：

：根目录{
--y:75px；
--x:75px；
}
.集装箱{
显示：网格；
网格模板列：计算（var（--x）*2）重复（自动填充，var（--x））；
网格模板行：计算（var（--y）*2）；
栅格自动行：var（--y）；
}
.container>div{
边框：1px纯红；
}

您尝试的代码会很有帮助。您总是将其设置为145px宽度。您还可以这样设置动态宽度：

网格模板列：重复（自动填充，最小值（145px，1fr））

CSS网格不能替代表格。我建议你使用合适的工具来完成这项工作。如果你想使一个表动态化，那么你必须使用表，而不是css网格