如何修复我的 CSS 网格？

目前，我正在尝试制作一个能够进行大量计算的计算器应用程序。然而，我制作的按钮（尚未运行，因此无需担心 JavaScript）彼此之间都有间隙。自己运行我的 HTML 和 CSS 来发现这个问题可能会更容易，但是 CSS 网格导致我的按钮之间存在很大的间隙。

问题：如何修复 CSS 网格以使按钮之间没有太大间隙？

它应该是什么样子：您以前可能见过计算器，所有按钮都应该并排放置，中间没有任何间隙（至少，不是很大）。

超文本标记语言

<!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
        <meta name="author" content="nuh uh">
        <link rel="stylesheet" href="styles.css">

        <title>Calculator App</title>
    </head>

    <body>
        <div id="calculator-grid">
            <div id="output">
                <div id="previous-operand"></div>
                <div id="current-operand"></div>
            </div>

            <button class="buttons2">Clear All</button>
            <button class="buttons2">Delete</button>
            <button class="buttons">/</button>
            <button class="buttons">1</button>
            <button class="buttons">2</button>
            <button class="buttons">3</button>
            <button class="buttons">*</button>
            <button class="buttons">4</button>
            <button class="buttons">5</button>
            <button class="buttons">6</button>
            <button class="buttons">+</button>
            <button class="buttons">7</button>
            <button class="buttons">8</button>
            <button class="buttons">9</button>
            <button class="buttons">.</button>
            <button class="buttons">0</button>

            <button class="buttons">x<sup>y</sup></button>
            <button class="buttons"><sup><sup>y</sup></sup>√x</button>
            <button class="buttons">log<sub>x</sub>(y)</button>
            <button class="buttons">Mod</button>

            <button class="buttons">(</button>
            <button class="buttons">)</button>
            <button class="buttons">e</button>

            <button class="buttons">Sin</button>
            <button class="buttons">Cos</button>
            <button class="buttons">Tan</button>
            <button class="buttons">π</button>
            <button class="buttons">Csc</button>
            <button class="buttons">Sec</button>
            <button class="buttons">Cot</button>
            <button class="buttons">i</button>

            <button class="buttons">Sin<sup>-1</sup></button>
            <button class="buttons">Cos<sup>-1</sup></button>
            <button class="buttons">Tan<sup>-1</sup></button>
            <button class="buttons">φ</button>
            <button class="buttons">Csc<sup>-1</sup></button>
            <button class="buttons">Sec<sup>-1</sup></button>
            <button class="buttons">Cot<sup>-1</sup></button>
            <button class="buttons">></button>

            <button class="buttons">Sinh</button>
            <button class="buttons">Cosh</button>
            <button class="buttons">Tanh</button>
            <button class="buttons"><</button>
            <button class="buttons">Csch</button>
            <button class="buttons">Sech</button>
            <button class="buttons">Coth</button>
            <button class="buttons">≥</button>

            <button class="buttons">Sinh<sup>-1</sup></button>
            <button class="buttons">Cosh<sup>-1</sup></button>
            <button class="buttons">Tanh<sup>-1</sup></button>
            <button class="buttons"><</button>
            <button class="buttons">Csch<sup>-1</sup></button>
            <button class="buttons">Sech<sup>-1</sup></button>
            <button class="buttons">Coth<sup>-1</sup></button>

            <button class="buttons">EE</button>
            <button class="buttons">Rad</button>
            <button class="buttons">Deg</button>
            <button class="buttons2">=</button>
        </div>
    </body>
</html>

CSS

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Gotham Rounded, sans-serif;
    font-weight: 400;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00fffb, #25ff29);
}

#calculator-grid {
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(17, 100px);
}

#calculator-grid > button {
    cursor: pointer;
    border: 1px solid black;
    outline: none;
}

#calculator-grid > button:hover {
    background-color: rgb(191, 183, 183, .9);
}

.buttons {
    height: 50px;
    width: 75px;
    font-size: 14pt;
    background-color: rgb(227, 197, 197);
}

.buttons2 {
    height: 50px;
    width: 100px;
    font-size: 16pt;
    font-weight: 600;
}

#myConsole {
    background-color: black;
    color: white;
    min-height: 100px;
}

我尝试过的：

我尝试去掉网格（或其中的一部分），但它不起作用。我不太确定还能做什么。

解决方案1

干得好：

CSS

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Gotham Rounded, sans-serif;
    font-weight: 400;
    font-size: 16px;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00fffb, #25ff29);
}

#calculator-grid {
    --_button-width: 70px;
    --_gap-size: 8px;
    display: grid;
    justify-content: center;
    align-content: center;
    gap: var(--_gap-size);
    grid-template-columns: repeat(4, var(--_button-width));
    grid-template-rows: repeat(16, 1fr);
    width: fit-content;
    margin-inline: auto;
    margin-block: 2rem;
}

#calculator-grid > button {
    cursor: pointer;
    border: 1px solid black;
    outline: none;
    font-size: 14pt;
}

#calculator-grid > button:hover {
    background-color: rgb(191, 183, 183, .9);
}

#output  {
    grid-column: 1 / -1;    /* all columns */
    grid-row: 1 / 2;        /* top row */
    height: 50px;
    background-color: red;
}

.buttons {
    background-color: rgb(227, 197, 197);
}

.buttons2 {
    width: calc((var(--_button-width) * 3 + var(--_gap-size)) / 2);
    font-weight: 600;
    background-color: green;
}

#calculator-grid button:nth-of-type(1) {
    grid-column: 1 / 2;     /* first 2 columns */
    justify-self: start;
}

#calculator-grid button:nth-of-type(2) {
    grid-column: 2 / 4;     /* first 3 & 4 columns */
    justify-self: end;
}

#calculator-grid button:last-of-type {
    grid-column: 3 / 5;     /* last 2 columns */
    justify-self: stretch;
    width: auto;
}

.myConsole {
    background-color: black;
    color: white;
    min-height: 100px;
}

我已经删除了固定尺寸并允许 grid 设置尺寸。

笔记：

* 元素通过使用来定位 grid 句法。
* 按钮将适合网格单元。
* 对于输出，我将其设置为顶行。
* 前 2 个超大按钮我设置为 3 个单元格中的 1.5 个（包括间隙），使用 calc(..)。所以如果你改变 --_button-width 或者 --_gap-size 变量，按钮将完美调整大小
* 最后，为了美观，我将最后一个按钮设置为适合 2 个单元格。不需要计算，只需告诉它拉伸以适应即可。

CodePen 上的工作示例：网格格式[^]