Unexpected column gap in Mozilla

I made a simple calculator using HTML, CSS and JavaScript. When I run it in Chrome it has no gap between columns but When I tried to run in Mozilla I saw some gap between columns. For resolving problem, I used column-gap: 0 and -moz-column-gap: 0 but It didn't work. You can see what I say in these images:

In Mozilla:

In Chrome:

here is my code and style:

.calculator {
  position: relative;
  display: grid;
}

.calculator .value {
  display: grid;
  grid-column: span 4;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
  text-align: right;
  height: 100px;
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

.calculator span {
  display: grid;
  width: 75px;
  height: 75px;
  color: #fff;
  background-color: #0c2835;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

<form name="calc" action="#" class="calculator">
  <input type="text" name="txt" readonly="" class="value">
  <span class="num clear" onclick="document.calc.txt.value = ''">c</span>
  <span class="num" onclick="document.calc.txt.value += '/'">/</span>
  <span class="num" onclick="document.calc.txt.value += '*'">*</span>
  <span class="num" onclick="document.calc.txt.value += '7'">7</span>
  <span class="num" onclick="document.calc.txt.value += '8'">8</span>
  <span class="num" onclick="document.calc.txt.value += '9'">9</span>
  <span class="num" onclick="document.calc.txt.value += '-'">-</span>
  <span class="num" onclick="document.calc.txt.value += '4'">4</span>
  <span class="num" onclick="document.calc.txt.value += '5'">5</span>
  <span class="num" onclick="document.calc.txt.value += '6'">6</span>
  <span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
  <span class="num" onclick="document.calc.txt.value += '3'">3</span>
  <span class="num" onclick="document.calc.txt.value += '2'">2</span>
  <span class="num" onclick="document.calc.txt.value += '1'">1</span>
  <span class="num" onclick="document.calc.txt.value += '0'">0</span>
  <span class="num" onclick="document.calc.txt.value += '00'">00</span>
  <span class="num" onclick="document.calc.txt.value += '.'">.</span>
  <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value); console.log(calc.txt.value)">=</span>
</form>

Do you have any idea?

Solution

It's because you didn't define a rule for the grid layout (grid-template-columns). As such you having a 4 column grid soley because you use grid-column: span 4; for a one of the grid-cards. As such every UA applies differend values to the grid. Mozilla applies repeat(4, 1fr) which will cause the gap.

Add: grid-template-columns: repeat(4, min-content); and that issue should be fixed.

.calculator {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

.calculator .value {
  display: grid;
  grid-column: span 4;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
  text-align: right;
  height: 100px;
  margin: 0;
}

.calculator span {
  display: grid;
  width: 75px;
  height: 75px;
  color: #fff;
  background-color: #0c2835;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

<form name="calc" action="#" class="calculator">
  <input type="text" name="txt" readonly="" class="value">
  <span class="num clear" onclick="document.calc.txt.value = ''">c</span>
  <span class="num" onclick="document.calc.txt.value += '/'">/</span>
  <span class="num" onclick="document.calc.txt.value += '*'">*</span>
  <span class="num" onclick="document.calc.txt.value += '7'">7</span>
  <span class="num" onclick="document.calc.txt.value += '8'">8</span>
  <span class="num" onclick="document.calc.txt.value += '9'">9</span>
  <span class="num" onclick="document.calc.txt.value += '-'">-</span>
  <span class="num" onclick="document.calc.txt.value += '4'">4</span>
  <span class="num" onclick="document.calc.txt.value += '5'">5</span>
  <span class="num" onclick="document.calc.txt.value += '6'">6</span>
  <span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
  <span class="num" onclick="document.calc.txt.value += '3'">3</span>
  <span class="num" onclick="document.calc.txt.value += '2'">2</span>
  <span class="num" onclick="document.calc.txt.value += '1'">1</span>
  <span class="num" onclick="document.calc.txt.value += '0'">0</span>
  <span class="num" onclick="document.calc.txt.value += '00'">00</span>
  <span class="num" onclick="document.calc.txt.value += '.'">.</span>
  <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value); console.log(calc.txt.value)">=</span>
</form>