CSS的Grid布局制作伸缩效果

1. 伸缩sidebar

效果

思路分析

实现思路很简单，就是鼠标放在sidebar上面，让它改变宽度即可。现在用Grid布局来实现一下：

HTML代码

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码

has选择器：允许我们根据一个元素的后代元素来确定其样式。（如果我存在什么样的后代元素，我将有什么的样式）

例如：section:has(p) { color: red }，如果section后代有p标签，那么section的字体颜色就变成红色。

* {
  padding: 0;
  margin: 0;
}
body,
html {
  height: 100%;
}
.container {
  display: grid;
  grid-template-columns: 60px 1fr;
  height: 100%;
  transition: all 300ms;
}
.container .left {
  background-color: orangered;
}
.container .right {
  background-color: #999;
}

// 如果div.container中有div.left发生了hover事件, 那么div.container的grid-template-columns发生变化
.container:has(.left:hover) {
  grid-template-columns: 10% auto;
}

2. 伸缩panel

效果

思路分析

鼠标放在哪个格子上，就改变当前格子的尺寸。

HTML代码

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS代码

* {
  padding: 0;
  margin: 0;
}
body,
html {
  height: 100%;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 10px;
  height: 100%;
  transition: all 500ms;
}
.container > div {
  background-color: purple;
  transition: all 500ms;
}
.container > div:hover {
  background-color: orangered;
}
.container:has(.left:hover) {
  grid-template-columns: 2fr 1fr 1fr;
}
.container:has(.center:hover) {
  grid-template-columns: 1fr 2fr 1fr;
}
.container:has(.right:hover) {
  grid-template-columns: 1fr 1fr 2fr;
}