Calculator column gap not changing even with css tool grid-column-gap

I’m making a calculator on my wordpress website. I found this tutorial that makes a code for a calculator online but when I did it for some reason there is a weird spacing between the grid columns of the "buttons". I tried assigning grid-row-column to 0px but that didn’t work. When I change the button sizes the column spacing doesn’t change, so I’m assuming that there is something that is making it fixed but I don’t know what it is exactly.

        .page-id-100 /*this is the page's id */
        {
            margin: 0;
            padding: 0;
            box sizing: border-box;
            font-family: 'Poppings', sans-serif;
        }

        .calculator 
        {
            grid-row-gap: 0px;
            position: relative;
            display: grid;
        }

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

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

        .calculator span:active
        {
            background: #74ff3b;
            color: #111;
        }

        .calculator .clear
        {
            grid-column: span 2;
            width: 120px;
            background: #ff3077
        }

        .calculator .plus
        {
            grid-row: span 2;
            height: 120px;
        }

        .calculator .equal
        {
            background: #03b1ff;
        }
<form class="calculator" name="calc"><input class="value" type="text" name="txt" /> 
<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)">=</span>
</form>

70 thoughts on “Calculator column gap not changing even with css tool grid-column-gap”

Leave a Comment