完整的出血细节，以获取响应列表

Question

我有一个项目列表，可以扩展以显示更多详细信息（类别项目2是可扩展的）， 至此，我使用了两个嵌套网格。可能不是最好的解决方案

我的问题是我想扩展细节的背景，直到布局的两边类似于标题为止

来自：

至：

一种方法是在每侧增加可观的边距，并用填充进行补偿，但是有没有更优雅的方法来实现这种布局？

const detail = document.getElementById("detail")

function toggleDetails() {
  detail.classList.toggle("visible");
}

.container {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1rem, 1fr) 
    [main-start] minmax(0, 40em) [main-end]
    minmax(1rem, 1fr) [full-end];
  grid-gap: 1rem;
  background: #eee;
}

.container > * {
  grid-column: main;
}

.header {
  grid-column: full;
  background: white;
}

.categories {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(9rem , 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

.categories > li {
  border: 1px solid limegreen;
}

#detail {
  display: none;
  grid-column: 1 / -1;
  background: white;
}

#detail.visible {
  display: initial;
}

body {
  margin: 0;
}

<div class="container">
  <div class="header container">
    <h1>John Doe</h1>
  </div>
  <div>Categories: </div>
  <ul class="categories">
    <li>Category 1</li>
    <li>Category 2
      <button onclick="toggleDetails()">+</button>
    </li>
    <li id="detail" class="visible">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis illum earum, iusto repellendus repellat inventore possimus assumenda ipsa eum tempore nihil sed, eius facilis aliquam laboriosam placeat impedit atque ut.</li>
    <li>Category 3</li>
    <li>Category 4</li>
  </ul>
</div>