Comment puis-je réparer ma grille CSS ?

Actuellement, j’essaie de créer une application de calculatrice capable de faire beaucoup de calculs. Cependant, les boutons que j’ai créés (ne fonctionnent pas encore, donc pas besoin de s’inquiéter du JavaScript) ont tous des espaces entre eux. Il serait peut-être plus facile d’exécuter mon code HTML et CSS vous-même pour constater ce problème, mais il n’y a que de grands écarts entre mes boutons causés par la grille CSS.

Question: Comment puis-je réparer ma grille CSS pour qu’il n’y ait pas de grands écarts entre les boutons ?

À quoi cela devrait ressembler : Vous avez probablement déjà vu une calculatrice, tous les boutons sont censés être côte à côte sans aucun espace entre les deux (du moins, pas grand).

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

Ce que j’ai essayé :

J’ai simplement essayé de me débarrasser de la grille (ou de parties de celle-ci) et cela n’a tout simplement pas fonctionné. Je ne sais pas vraiment quoi faire d’autre.

Solution 1

Voici:

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

J’ai supprimé les tailles fixes et autorisé le grid pour définir la taille.

Remarques:

* Les éléments sont positionnés en utilisant grid syntaxe.
* Les boutons s’adapteront à la cellule de la grille.
* Pour la sortie, je l’ai défini sur la ligne supérieure.
* Les 2 premiers boutons surdimensionnés que j’ai réglés sur 1,5 sur 3 cellules (y compris les espaces) en utilisant calc(..). Donc si vous changez le --_button-width ou --_gap-size variables, le bouton se redimensionnera parfaitement
* Enfin, pour des raisons d’esthétique, j’ai fait en sorte que le dernier bouton puisse contenir 2 cellules. Aucun calcul requis, dites-lui simplement de s’étirer pour s’adapter.

Exemple de travail sur CodePen : Formatage de la grille[^]