CSS Grid - 鼠标悬停时设置项目宽度

Question

我正在构建一个简单的CSS网格布局，看起来像这样...

.container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
}

.col1 {
  padding:20px;
  background:red;
  color:white;
  text-align:center;
}

.col2 {
  padding:20px;
  background:green;
  color:white;
  text-align:center;
}

.col3 {
  padding:20px;
  background:blue;
  color:white;
  text-align:center;
}

.col4 {
  padding:20px;
  background:gray;
  color:white;
  text-align:center;
}

<div class="container">

  <div class="col1">
    Column 1
  </div>

  <div class="col2">
    Column 2
  </div>

  <div class="col3">
    Column 3
  </div>

  <div class="col4">
    Column 4
  </div>

</div>

我正在尝试让任何一列在悬停时改变宽度，以便悬停的列占据2fr。我知道使用flexbox可以在项目本身中设置项目的宽度，但是使用grid时需要在容器上设置项目宽度。是否有方法在项目上设置宽度？

- fightstarr20

---

你尝试过使用 .container>div:hover {width:40vw} 来检查你的网格表现吗？ - G-Cyrillus

相关：https://dev59.com/67Lma4cB1Zd3GeqPUw0-#54834180（可能是您正在寻找的内容） - Temani Afif

首先，您可以在悬停元素上使用 grid-column: 2。现在，您可以使用 grid-auto-flow: column 将 网格项流方向 切换为列，并使用 grid-auto-columns: 1fr 设置隐式列为 1fr - 在悬停时，您现在将有 5 列，而 悬停的 元素将占用其中的 2fr...请参见 https://jsfiddle.net/anz3e2t5/（如果这是预期输出，将转换为答案） - kukkuz

上面评论中的fiddle中的输出是否是预期输出？ - kukkuz

Answer 1

你可以使用 grid-column 属性来实现此操作。它需要两个整数，即起始和结束轨道（例如 1/3）。问题在于，你无法扩展最后一列而不进行额外的工作，因为它会跳到下一行，超出了初始悬停区域的范围： 编辑：根据下面的评论，我已更新 hover 代码为：grid-column: span 2; 这与 "从开始轨道开始并跨越 2 列" 相同。这样做更加简洁，因为它允许你为每列设置单个样式规则。我还添加了一个 :not(.col4) 规则，以避免列跳到下一行的问题。当然，你需要为每列设置相同的 "col" 类才能使其正常工作：

.container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
}

.col1 {
  padding:20px;
  background:red;
  color:white;
  text-align:center;
}

.col2 {
  padding:20px;
  background:green;
  color:white;
  text-align:center;
}

.col3 {
  padding:20px;
  background:blue;
  color:white;
  text-align:center;
}

.col4 {
  padding:20px;
  background:gray;
  color:white;
  text-align:center;
}

.col:not(.col4):hover{
   grid-column: span 2;
}

<div class="container">

  <div class="col1 col">
    Column 1
  </div>

  <div class="col2 col">
    Column 2
  </div>

  <div class="col3 col">
    Column 3
  </div>

  <div class="col4 col">
    Column 4
  </div>

</div>

- symlink

---

谢谢你，这让我想到了flexbox可能更适合我的需求。 - fightstarr20

实际上，最好在悬停时设置 grid-column: span 2，而不是设置固定的列范围。 - Vadim Ovchinnikov

@VadimOvchinnikov 我同意，这是更好的方式！请查看我的编辑。 - symlink