¿Cómo puedo arreglar mi cuadrícula CSS?

Actualmente, estoy intentando crear una aplicación de calculadora que pueda realizar muchos cálculos. Sin embargo, todos los botones que he creado (que aún no funcionan, por lo que no es necesario preocuparse por el JavaScript) tienen espacios entre sí. Puede que sea más fácil ejecutar mi HTML y CSS usted mismo para ver ese problema, pero hay grandes espacios entre mis botones causados por la cuadrícula CSS.

Pregunta: ¿Cómo puedo arreglar mi cuadrícula CSS para que no haya grandes espacios entre los botones?

Cómo debería verse: probablemente hayas visto una calculadora antes; se supone que todos los botones están uno al lado del otro sin ningún espacio entre ellos (al menos, no uno grande).

HTML

<!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;
}

Lo que he probado:

Intenté simplemente deshacerme de la cuadrícula (o partes de ella) y simplemente no funcionó. No estoy realmente seguro de qué más hacer.

Solución 1

Aquí tienes:

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;
}

Eliminé los tamaños fijos y permití que grid para establecer el tamaño.

Notas:

* Los elementos se posicionan usando grid sintaxis.
* Los botones se ajustarán a la celda de la cuadrícula.
* Para la salida, la configuré en la fila superior.
* Los primeros 2 botones de gran tamaño los configuré en 1,5 de 3 celdas (incluidos los espacios) usando calc(..). Entonces si cambias el --_button-width o --_gap-size variables, el botón cambiará de tamaño perfectamente
* Por último, por motivos estéticos, hice que el último botón cupiera 2 celdas. No se requiere cálculo, simplemente dígale que se estire para ajustarse.

Ejemplo de trabajo en CodePen: Formato de cuadrícula[^]