是否有一种仅 html + css 的方法可以跨多个网格同步动态网格列宽度？

Question

与我合作的设计师定期提交设计，其中页面中会有多个表格，通常由段落或中间的其他内容分隔。他更喜欢每个表的列具有相同的宽度。这是一个例子...

Employees
--------------------------------------------------------
| Name                          | Start Date           |
--------------------------------------------------------
| Bill                          | 10/22/1983           |
--------------------------------------------------------
| Jim                           | 04/14/2010           |
--------------------------------------------------------
| Jessica                       | 06/08/2002           |
--------------------------------------------------------

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.

Lunch Menu
--------------------------------------------------------
| Name                          | Price                |
--------------------------------------------------------
| Pizza Slice                   | $2.50                |
--------------------------------------------------------
| Pulled Pork Sandwich          | $5.99                |
--------------------------------------------------------
| Fried Chicken Dinner          | $7.99                |
--------------------------------------------------------

我的希望是找到一个可重用的仅 html + css (scss) 解决方案。我的方法是在文档的内容中使用单个网格......

Employees
--------------------------------------------------------
| Name                          | Start Date           |
--------------------------------------------------------
| Bill                          | 10/22/1983           |
--------------------------------------------------------
| Jim                           | 04/14/2010           |
--------------------------------------------------------
| Jessica                       | 06/08/2002           |
--------------------------------------------------------

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.

Lunch Menu
--------------------------------------------------------
| Name                          | Price                |
--------------------------------------------------------
| Pizza Slice                   | $2.50                |
--------------------------------------------------------
| Pulled Pork Sandwich          | $5.99                |
--------------------------------------------------------
| Fried Chicken Dinner          | $7.99                |
--------------------------------------------------------

.grid-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 5px;
}

h2,
p {
  grid-column: 1/-1;
  margin: 10px 0;
}

.header {
  padding: 5px 10px;
  background-color: #ddd;
}

.record {
  padding: 5px 10px;
  background-color: #eee;
}

这与我正在寻找的很接近，但是这种方法存在一些问题......

首先，它可以防止边距重叠。例如，如果我有两个段落，10px顶部和底部都有边距，20px它们之间就会有间隙，这意味着网格中的内容需要自己的一套样式规则。

其次，它要求所有表格具有相同的列数，或者，我再次需要具有内容特定的样式规则，如果我们想让用户选择要显示的列，这不一定是一件简单的事情。

第三，我非常喜欢使用表格内容的包装器，以便它更多地包含在标记中，但这种方法要求每个单元格与共享网格的所有其他内容处于同一级别。

还有其他细微差别，但这些是我目前担心的问题。如果可以的话，我想避免使用 JavaScript，因为我当前正在处理的项目是一个相当大的 Angular 应用程序，并且事件侦听器（例如窗口调整大小）已经相当繁重。

使用实际的<table>' 代替 a 就grid可以了，我刚刚发现网格更灵活。如果我可以有两个独立的网格，它们以某种方式了解彼此的内容并相应地调整其列的大小，那就太棒了。

当然，如果涉及到这一点，总是可以选择告诉设计师“不” 。（耸肩）

Answer 1

使用 var() 同步列宽。公共容器中的网格定义将具有对齐的列。

:root {
    --my-grid-col: [col-1] 60%  [col-2] 40%;
}

.grid-1 {
    display: grid;
    grid-template-columns: var(--my-grid-col);
    /*other styles...*/
}

.grid-2{
    display: grid;
    grid-template-columns: var(--my-grid-col);
    /*other styles...*/
}