0

I have 2 grids, one of them shows 3 columns while the other shows 4 columns. I use different CSS classes to set the --cols prop.

.base-grid {
  --w-max: 175px;
  --gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), min(var(--w-max), calc(100% - (var(--cols)-1) * var(--gap)) / var(--cols)));
  gap: var(--gap);
  justify-content: center;
}

.a-grid {
  --cols: 3;
}

.b-grid {
  --cols: 4;
}

.base-grid>div {
  height: 50px;
  background: red;
}
<div class="base-grid a-grid">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="base-grid b-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

This snippet works in Chrome but in Firefox both grids only show 1 column. Why?

Some Noob Student
  • 14,186
  • 13
  • 65
  • 103

1 Answers1

0

The issue was the format of (var(--cols)-1). Apparently on Firefox the parser is not smart enough to figure out this is arithmetic. You have to put a space around the minus sign like so (var(--cols) - 1)

Some Noob Student
  • 14,186
  • 13
  • 65
  • 103
  • Not really FF not being 'smart enough' - it is a requirement to have spaces either side of a + or - operator See e.g. https://w3c.github.io/csswg-drafts/css-values/#calc-func so FF is just following the standards. – A Haworth Dec 11 '22 at 09:18