如何正確使用計算機？

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>