Is there an html + css-only way to synchronize dynamic grid column widths across multiple grids?

Question

The designer I work with regularly submits designs where there will be multiple tables in a page, usually broken up by a paragraph or some other content in between. He prefers that the columns for each table have identical widths. Here's an example...

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                |
--------------------------------------------------------

My hope is to find an html + css (scss) only solution that's reusable. My approach to this point is to use a single grid across the document's content...

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

This is close to what I'm looking for, but there are a few problems with this approach...

First, it prevents margins from overlapping. For example, if I have two paragraphs with a 10px margin on the top and bottom, there will be a 20px gap between them, which means content in the grid needs its own set of style rules.

Second, it requires that all table's have the same number of columns or, once again, I'll need to have content specific style rules which isn't necessarily a simple thing if we want to let the user choose which columns to display.

Third, I'd very much prefer to use a wrapper around table content so it's more contained in the markup, but this approach requires that each cell be on the same level as every other piece of content sharing the grid.

There are other nuances, but those are my current concerns. I'd like to avoid using JavaScript if I can, as the project I'm currently working on is a rather large Angular application and already pretty heavy on event listeners (such as window resize).

Using actual <table>'s instead of a grid is fine, I've just found grids to be more flexible. What would be fantastic is if I could have two independent grids that are somehow aware of each other's content and size their columns accordingly.

Of course, there's always the option of just telling the designer, "no" if it comes to that. (shrug)

Answer 1

Sync columns widths using var(). Grids definitions in a common container will have aligned columns.

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