CSS Grid content-area水平扩展填充容器

Question

我有一个 CSS 网格容器，里面有一个侧边栏和内容区域。我想当用户关闭侧边栏时，内容区域水平扩展以填充容器的整个宽度。我在我的波纹管示例中使用 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 中有静态宽度。现在他们expanding/collapsing如你所愿。

关于其他行为，“当用户关闭侧边栏时”是什么意思？请描述此动作。描述侧边栏的两种行为，在哪种情况下它应该折叠和展开？我认为，整个解决方案将需要 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>

CSS Grid content-area水平扩展填充容器

CSS Grid content-area horizontally expansion for filling the container

css

expand

css-transforms

css-grid