Làm cách nào để sửa lưới CSS của tôi?

Hiện tại, tôi đang cố gắng tạo một ứng dụng máy tính có thể thực hiện nhiều phép tính. Tuy nhiên, các nút tôi đã tạo (chưa hoạt động nên không cần lo lắng về JavaScript) đều có khoảng trống ở giữa nhau. Có thể dễ dàng hơn nếu bạn tự chạy HTML và CSS để thấy vấn đề đó, nhưng có những khoảng trống lớn giữa các nút do lưới CSS gây ra.

Câu hỏi: Làm cách nào tôi có thể sửa lưới CSS của mình để không có khoảng trống lớn giữa các nút?

Nó trông như thế nào: Có thể bạn đã từng nhìn thấy một chiếc máy tính trước đây, tất cả các nút phải nằm cạnh nhau mà không có bất kỳ khoảng trống nào ở giữa (ít nhất là không phải là một nút lớn).

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

Những gì tôi đã thử:

Tôi đã cố gắng loại bỏ lưới (hoặc một phần của nó) và nó không hoạt động. Tôi không thực sự chắc chắn phải làm gì khác.

Giải pháp 1

Đây nhé:

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

Tôi đã xóa kích thước cố định và cho phép grid để thiết lập kích thước.

Ghi chú:

* Các phần tử được định vị bằng cách sử dụng grid cú pháp.
* Các nút sẽ vừa với ô lưới.
* Đối với đầu ra, tôi đã đặt nó ở hàng trên cùng.
* 2 nút oversize đầu tiên mình set là 1.5 trên 3 ô (kể cả các khoảng trống) bằng cách sử dụng calc(..). Vì vậy nếu bạn thay đổi --_button-width hoặc --_gap-size các biến, nút sẽ thay đổi kích thước một cách hoàn hảo
* Cuối cùng, để đảm bảo tính thẩm mỹ, mình đã làm nút cuối cùng vừa với 2 ô. Không cần vôi hóa, chỉ cần bảo nó co giãn cho vừa vặn.

Ví dụ hoạt động trên CodePen: Định dạng lưới[^]