كيف يمكنني إصلاح شبكة 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 بناء الجملة.
* سوف تناسب الأزرار خلية الشبكة.
* بالنسبة للإخراج، قمت بتعيينه في الصف العلوي.
* أول زرين كبيرين قمت بضبطهما على 1.5 من 3 خلايا (بما في ذلك الفجوات) المستخدمة calc(..). لذلك إذا قمت بتغيير --_button-width أو --_gap-size المتغيرات، سيتم تغيير حجم الزر بشكل مثالي
* أخيرًا، من الناحية الجمالية، جعلت الزر الأخير يناسب خليتين. لا حاجة للتكلس، فقط اطلب منه أن يتمدد ليناسب المقاس.

مثال عملي على CodePen: تنسيق الشبكة[^]