How to use calc correctly?

Question

: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 :{

Answer 1

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>

Answer 2

According to the calc docs on MDN,

The operands in the expression may be any syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

The error says 'one operand must be a number.' That makes me think using incorrect units could be the problem (or missing whitespace around operands), even though MDN says you can use different units in the calc method.

But in this specific scenario, a responsive grid is better off using the fr unit. MDN fr unit These can define the exact sizes you want and provide responsive re-sizing. The calc method is probably introducing an operand error, and without seeing your entire code it is difficult to pinpoint the exact line it is happening on. You can use a purely grid-approach without calc.

:root {
  --offset: 30px;
}

.grid-cols-custom {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

<div class="grid-cols-custom">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
</div>

Change the values of each fr unit to the exact ones you need

grid-template-columns: 3fr 2fr;