Javascript 计算器列间距即使使用css工具网格列间距也不会更改

我正在我的wordpress网站上做一个计算器。我在网上找到了这个教程，它为计算器制作了一个代码，但是当我出于某种原因这样做时，“按钮”的网格列之间有一个奇怪的间距。我尝试将网格行列指定给0px，但没有成功。当我改变按钮大小时，列间距不会改变，所以我假设有某种东西使它固定，但我不知道它到底是什么

.page-id-100/*这是页面的id*/
{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Poppings”，无衬线；
}
.计算器
{
网格行间距：0px；
位置：相对位置；
显示：网格；
}
.计算器.数值
{
格构柱：跨度4；
高度：100px；
文本对齐：右对齐；
边界：无；
大纲：无；
填充：10px；
字号：18px；
}
.计算器量程
{
显示：网格；
宽度：60px；
高度：60px；
颜色：#fff；
背景：#0c2835；
放置项目：中心；
边框：1px实心rgba（0,0,0,0.1）；
}
.计算器量程：激活
{
背景#74ff3b；
颜色：#111；
}
.计算器.清除
{
格构柱：跨度2；
宽度：120px；
背景:#ff3077
}
.计算器
{
网格行：跨度2；
高度：120px；
}
.计算器.相等
{
背景：#03b1ff；
}

C
/ 
* 
7.
8.
9
- 
4.
5.
6.
+ 
3.
2.
1.
0
00
. 
=

这是因为您没有定义原始

计算器类的宽度。从
.calculator span
类中注释出宽度就可以看出这一点

要解决这个问题，只需在calculator类中添加宽度。100像素的宽度适合我

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

调整内容：从网格容器开始？