CSS 网格 - 设置悬停时的项目宽度

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 我可以在项目本身中设置项目的宽度，但是使用网格我可以在容器上设置项目宽度。

有没有办法将它们设置在项目上？

Answer 1

您可以使用该grid-column属性来执行此操作。它需要两个整数，即起始轨道和结束轨道（例如 1/3）。问题是，如果没有一些额外的工作，您就无法展开最后一列，因为它跳到下一行，超出了初始悬停区域的范围：

编辑：根据下面的评论，我已将悬停代码更新为：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>