网格模板列 fr 到 px 值的转换

Question

我有这个 HTML / CSS 片段：

.test123 {
  grid-template-columns: 255px 255px;
  transition: 200ms;
  display: grid;
  gap: 30px;
  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
  }
  .c1 {
    background-color: red;
    width: 100%;
    height: 100px;
  }
  .c2 {
    background-color: blue;
    width: 100%;
    height: 100px;
  }
}
.test123:has(:nth-child(1):hover) {
  grid-template-columns: 1fr 255px;
}
.test123:has(:nth-child(2):hover) {
  grid-template-columns: 255px 1fr;
}

<div class="test123">
        <div class="card c1"></div>
        <div class="card c2"></div>
</div>

我希望蓝色和红色卡片在悬停时有一些过渡，这样它们就能平滑地放大和缩小。

我试图允许

transition-behaviour: allow-discrete

，但它没有帮助，所以我有点陷入这个问题。

谢谢你

Answer 1

嗯，最简单的方法是完成浏览器的工作。看看你的代码，我建议你保持简单。

.test123 {
  grid-template-columns: 255px 255px;
  transition: 200ms;
  display: grid;
  gap: 30px;
  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
  }
  .c1 {
    background-color: red;
    width: 100%;
    height: 100px;
  }
  .c2 {
    background-color: blue;
    width: 100%;
    height: 100px;
  }
}

.test123:has(:nth-child(1):hover) {
  grid-template-columns: calc(100% - 255px - 30px) 255px;
}

.test123:has(:nth-child(2):hover) {
  grid-template-columns: 255px calc(100% - 255px - 30px);
}

<div class="test123">
  <div class="card c1"></div>
  <div class="card c2"></div>
</div>

Answer 2

您可以从

0fr

过渡到

1fr

，但将其

min-width

限制为

255px

.test123 {
  grid-template-columns: 0fr 0fr;
  transition: 200ms;
  display: grid;
  gap: 30px;
  
  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
  }
  .c1 {
    background-color: red;
    height: 100px;
    min-width: 255px;
  }
  .c2 {
    background-color: blue;
    height: 100px;
    min-width: 255px;
  }
}

.test123:has(:nth-child(1):hover) {
  grid-template-columns: 1fr 0fr;
}

.test123:has(:nth-child(2):hover) {
  grid-template-columns: 0fr 1fr;
}

<div class="test123">
  <div class="card c1"></div>
  <div class="card c2"></div>
</div>