如何正确使用计算器？

Question

:root {
    --offset: 30px;
  }

  .grid-cols-custom {
    /* 使用自定义属性和calc()计算列宽 */
    grid-template-columns: calc((424px / (100% - var(--offset))) * 100%)  calc((608px / (100% - var(--offset))) * 100%);

在一个网格中，我有两个项目，一个是424px，另一个是608px。我希望它们是响应式的。但是填充和间隙会导致视觉错误。所以我想要一个带有计算的百分比：

逻辑：((424px / (div的全宽度 - 30px)) * 100%)，这样我们的div将始终调整它们的宽度

请帮帮我。这里有一个CSS验证器报告的问题：“一个操作数必须是一个数字”

我已经做了4个小时了：{

Answer 1

根据您使用的数值，这似乎是正确的做法。它是响应式的，大小基本相同，之间有30px的间隔。我认为您的解决方案太复杂且脆弱，特别是在响应式方面。

您的数字：

• 30px的间隔
• 424px的第一列宽度
• 608px的第二列宽度
• 基本总宽度：1062px

这大致是40%到60%的比例。使用4fr 6fr或者更好的2fr 3fr应该足够接近。

.grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 30px;
  height: 300px;
}

.col {
background: lightseagreen;
}

<div class="grid">
  <div class="col">第一列：2fr</div>
  <div class="col">第二列：3fr</div>
</div>

如果您愿意，我们可以通过使用424fr 608fr来更接近。这是奇数，但这将是您所寻找的确切值。在总宽度中，使用424个分数作为第一列，使用608个分数作为第二列。然后添加间隔。

.grid {
  display: grid;
  grid-template-columns: 424fr 608fr;
  gap: 30px;
  height: 300px;
}

.col {
background: lightseagreen;
}

<div class="grid">
  <div class="col">第一列：424fr</div>
  <div class="col">第二列：608fr</div>
</div>