How to use calc correctly?

:root {
    --offset: 30px;
  }

  .grid-cols-custom {
    /* Calculate the column widths using custom properties and calc() */
    grid-template-columns: calc((424px / (100% - var(--offset))) * 100%)  calc((608px / (100% - var(--offset))) * 100%);

here in a grid I have 2 items one is 424px and other is 608px . I want them to be responsive. But padding and gap creates an visual error. so i want a percentage with a calculation :

logic : ((424px/ (full width of the div - 30px )) * 100%) so our divs will always adjust their width

please help me . Here is a problem told by css validator 'one operand must be a number'

i have been at this for 4 hours :{

I believe there is a much simpler option for you. It's responsive and basically the same sizes with a 30px gap. I think your solution is too complicated and brittle, especially to be responsive.

Your numbers:

• 30px gap
• 424px col 1 width
• 608px col 2 width
• Base Total: 1062px

Based on the values you're using, this is roughly a 40% to 60% ratio. Using 4fr 6fr for the columns or even better 2fr 3fr should be close enough.

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

.col {
background: lightseagreen;
}

<div class="grid">
  <div class="col">First Col: 2fr</div>
  <div class="col">Second Col: 3fr</div>
</div>

We could get it even closer if you wanted by doing 424fr 608fr. It's odd numbers, but that would be the exact of what you're looking for. Of the total width, use 424 fractions for the first column and 608 fractions for the second. Then add the gap.

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

.col {
background: lightseagreen;
}

<div class="grid">
  <div class="col">First Col: 424fr</div>
  <div class="col">Second Col: 608fr</div>
</div>