是否可以在单个/单独的 html 元素中创建统一的列

如何解决是否可以在单个/单独的 html 元素中创建统一的列

我想创建一个列表，它是一个 html 容器 (div) 并将其中的列表项 (div) 列为单独的面板，但我希望列表是统一的，因此面板内的列应该排队，就像这张图：

可见，Col_1 的宽度为 "BBBBB"，因为这是该列中最宽的内容，Col_2 的宽度为 "0x12345678"，依此类推...

我没有找到任何能够在其父级之外用作网格或表格的 css，并且由于所有列表项容器都是“网格”的父级，因此它们无法同步。

我一直在尝试创建一个 javascript 来搜索每个列元素，选择最宽的并将宽度设置为列中的所有其他元素，将此方法分配给每个元素的 DOMSubtreeModified 事件并将元素分配给ResizeObserver。

它运行得相当好，但是由于这个列表是动态生成的，将每个项目附加到 DOM 树会触发 resize 事件，这并不是很好。我尝试在生成列表时禁用我的 resize 方法，并且仅在将列表作为一个整体附加到 DOM 后才启用它，但是每个项目都会立即调用 ResizeObserver 事件。即使在所有项目都附加并填充内容之后从 requestAnimationFrame(() => { ... }); 调用它，这应该只在所有项目可见并且它们的内容没有改变后发生，所有项目都会触发 ResizeObserver，因为它们的大小有已更改。

Javascript 是这样的：

// This is called only once on init
var resizeObserver = new ResizeObserver((entries) => {
    for (var entry of entries) {
        var elem = $(entry.target);
        console.log("Elem resized",elem);
        // I should call the resizeColumn() here
    }
});


// The following code is called every time when the list data arrives to listData variable
var listPanel = $("#listPanel");

listData.forEach((entry) => {
    listPanel.append(createListEntry(entry)); // createListEntry() function creates an list item with content
});

requestAnimationFrame(() => {
    listPanel.find("[col-group='Col_1']").each((key,elem) => {
        resizeObserver.observe(elem); // for some reason this triggers the callback immediately
    });
});

resizeColumn("Col_1"); // this should make uniform columns for Col_1 only after showing the list,// but the ResizeObserver calls this function as many times as many items
                       // I have in the list

我真的很想用纯html/css来解决这个问题，但我不知道这个问题有什么样的解决方案。

我想避免使用 min-width/max-width 类型的解决方案，因为内容是动态的，应该以最佳方式使用空间。

如果没有纯 html/css 解决方案，那么我应该如何修改我的 javascript，以免在显示项目时触发 ResizeObserver？

----------------------------------- 编辑------------ --------------------------

这是我能得到的最接近的，但是由于 listItem 类设置了 display: contents 我不能让它有背景、边框或任何样式，因为它不再是一个盒子了。如果我可以为每一行添加一个元素来添加样式，那将是完美的。在评论下方推荐了 subgrid，这将是这项工作的最佳选择，遗憾的是不支持，只有 Firefox。

html,body {
  padding: 0.5rem;
  background: #121212;
  color: #ffffff;
  font-family: verdana;
}

.listContainer {
  display: inline-grid;
  grid-template-columns: auto auto auto 1fr;  
}

.listItem {
  display: contents;
  background: #45729a;
  border: 1px solid yellow;
}

.listCell {
  background: #ef4536;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="listContainer">
  
  <div class="listItem">
    <div class="listCell">AAA</div>
    <div class="listCell">0x00001</div>
    <div class="listCell">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="listCell">true</div>
  </div>
  
  <div class="listItem">
    <div class="listCell">BBBBB</div>
    <div class="listCell">0x00</div>
    <div class="listCell">bbbbbb</div>
    <div class="listCell">false</div>
  </div>
  
  <div class="listItem">
    <div class="listCell">C</div>
    <div class="listCell">0x12345678</div>
    <div class="listCell">ccc</div>
    <div class="listCell">true</div>
  </div>
  
</div>

解决方法

我认为一种方法是，为所有要设置相同宽度的元素设置相同的类名。然后在js中获取它们，比较它们的宽度，然后将最大的一个设置为每个元素的宽度。

var heights = [];
document.querySelectorAll('.col_1').forEach(col => {
    heights.push(col.offsetHeight);
})

然后使用一些基本算法比较heights列表的元素，然后将最大值设置为每个人的身高。

document.querySelectorAll('.col_1').forEach(col => {
    col.offsetHeight = 'that_max_value';
})