具有共享自动调整列宽的多个 CSS 网格

Question

我在一个页面上有多个

div

，每个都为

display: grid

和

grid-template-columns: auto auto auto

配置。我希望每个网格共享相同的列宽，除了使用自动调整行为而不是硬编码像素宽度或使用

1fr 1fr 1fr

.

换句话说，我想实现这个：

每列增长到跨两个网格测量的最大内容宽度（注意绿线只是为了说明共享宽度布局），而不是：

每个网格的列宽仅基于它们自己的子单元格。

我正在寻找的是相当于 WPF

SharedSizeGroup

中的

Grid

，对于那些熟悉的人，或者一种解决方法。基本上我希望两个网格都被视为一个用于自动安装列的目的，但仍然是单独的

div

s，可以独立放置和设置样式。

纯 CSS 的解决方案将是理想的，尽管我很确定不存在。我使用 Javascript 没有问题，但即使是 Javascript 解决方案也让我无法完全放弃

grid

并重新发明它。

无论哪种方式，我都需要一些可合理扩展的东西（即我不想手动设置任何像素宽度，也不想要只适用于特定布局场景的临时解决方案）。

这可能吗？

Answer 1

确保所有项目都在同一个网格中。让内容在网格内，但扩展到所有网格列轨道。

<div style="display: grid; grid-template-columns: repeat(3, auto);">
  <div>Auto</div>
  <div>Auto</div>
  <div>Auto</div>
  <div>AAAAAAAAAAAAAAAAAAAAAA</div>
  <div>BB</div>
  <div>CCCCCCCCC</div>
  <div>AAAAA</div>
  <div>BBBBBBBBBBBBBBBBB</div>
  <div>CCCCCCCCCCCCC</div>
  <div>AAA</div>
  <div>BBBBBBB</div>
  <div>CCCCCCCCCCCCCCCCCC</div>

  <div style="grid-column: 1 / -1; padding: 2em; text-align: center">Other content</div>

  <div>Auto</div>
  <div>Auto</div>
  <div>Auto</div>
  <div>AAAA</div>
  <div>BBBBBBB</div>
  <div>CCCCCCCCC</div>
  <div>AAAAAAAAA</div>
  <div>BB</div>
  <div>CCCCCCCCC</div>
  <div>AAAAAAAAAAAA</div>
  <div>BBBBBBB</div>
  <div>CCCCC</div>
</div>