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>

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

1 个答案: