html - 是否有一种 html + css-only 方法来同步多个网格中的动态网格列宽？

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) 解决方案。对于这一点，我的方法是在文档的内容中使用单个网格...

.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;
}

<div class="grid-content">
  <h2>Employees</h2>

  <div class="header">Name</div>
  <div class="header">Start Date</div>

  <div class="record">Bill</div>
  <div class="record">10/22/1983</div>

  <div class="record">Jim</div>
  <div class="record">04/14/2010</div>

  <div class="record">Jessica</div>
  <div class="record">06/08/2002</div>

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

  <h2>Lunch Menu</h2>

  <div class="header">Name</div>
  <div class="header">Price</div>

  <div class="record">Pizza Slice</div>
  <div class="record">$2.50</div>

  <div class="record">Pulled Pork Sandwich</div>
  <div class="record">$5.99</div>

  <div class="record">Fried Chicken Dinner</div>
  <div class="record">$7.99</div>
</div>

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

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

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

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

还有其他细微差别，但这些是我目前关注的问题。如果可以的话，我喜欢避免使用 JavaScript，因为我目前正在处理的元素是一个相当大的 Angular 应用程序，而且事件监听器(例如窗口大小调整)已经非常繁重。 p>

使用实际 <table>而不是 grid很好，我只是发现网格更灵活。如果我可以有两个独立的网格，它们以某种方式知道彼此的内容并相应地调整它们的列的大小，那将会很棒。

当然，总是可以选择只告诉设计师，“不”，如果涉及到那个。 (耸肩)

Answer 1

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

: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...*/
}