确保所有项目都在同一网格中.使内容位于网格内，但跨所有网格列轨道展开.
<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>
根据 comments 进行编辑
您需要使用JavaScript"同步"网格列轨道.在这里，我使用第一个表第一行的前三个元素来检测网格列轨道宽度，然后将它们作为值grid-template-columns传递给第二个网格.
document.querySelector('.js-grid-to').style.gridTemplateColumns =
[...document.querySelector('.js-grid-from').children]
.slice(0, 3)
.map((element) => `${element.getBoundingClientRect().width}px`)
.join(' ');
<div class="js-grid-from" 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>
<div style="padding: 2em; text-align: center">Other content</div>
<div class="js-grid-to" style="display: grid">
<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>
