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

有没有办法在物品上设置它们？

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>