CSS Grid 内容区域水平扩展，用于填充容器

Question

我有一个 CSS Grid 容器，里面有一个侧边栏和内容区域。我想当用户关闭侧边栏时，内容区域水平扩展以填充容器的整个宽度。 在下面的示例中，我使用 transformX(-100%) 悬停侧边栏进行隐藏，使用 transformX(0%) 显示鼠标侧边栏：

.test-container {
  display: grid;
  background-color: aquamarine;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "sidebar content";
  height: 100vh;
}

.test-sidebar {
  background-color: blue;
  grid-area: sidebar;
  transform: translateX(0%);
  font-size: 40px;
  color: white;
  text-align: center;
  transition: 2000ms;
}

.test-sidebar:hover {
  transform: translateX(-100%);
  transition: 2000ms;
}

.test-content {
  background-color: blueviolet;
  font-size: 40px;
  text-align: center;
  grid-area: content;
  color: white;
}

<div class="test-container">
  <div class="test-sidebar">Sidebar</div>
  <div class="test-content">Content</div>
</div>

Answer 1

这是一个悬停在所有网格元素上的解决方案，只是为了演示我们如何处理两个不同的单元格。这里我们在.test-container 中有grid-template-columns: auto 1fr;，在.test-sidebar 中有静态宽度。现在它们正在按照您的意愿展开/折叠。

关于其他行为，“当用户关闭侧边栏时”是什么意思？请描述这个动作。描述侧边栏的两种行为，在这种情况下它应该折叠和展开？我认为，整个解决方案将需要 JS。如果需要，我会在您的描述后添加。

.test-container {
  display: grid;
  background-color: aquamarine;
  grid-template-columns: auto 1fr;
  height: 100vh;
  transition: all 2s ease;
}

.test-sidebar {
  background-color: blue;
  font-size: 40px;
  color: white;
  text-align: center;
  overflow: hidden;
  width: 200px;
  transition: all 2s ease;
}

.test-container:hover .test-sidebar {
  width: 0;
}

.test-content {
  background-color: blueviolet;
  font-size: 40px;
  text-align: center;
  color: white;
}

<div class="test-container">
  <div class="test-sidebar">Sidebar</div>
  <div class="test-content">Content</div>
</div>