使用CSS Grid实现计算器按钮单独调尺寸不影响其他单元格

要实现0按钮横向扩展、ENTER按钮纵向扩展的布局，不需要调整整行/列尺寸，利用CSS Grid的grid-column和grid-row属性就能单独控制指定单元格的跨度，不影响其他元素。

步骤1：修正HTML按钮标识 #

首先要修正重复使用id="button"的错误（ID在页面中必须唯一），改用class标识按钮，并给特殊按钮添加专属class：

<div class="buttons">
    <button class="btn">
        <h3> CLEAR </h3>
    </button>
    <button class="btn">
        <h3> / </h3>
    </button>
    <button class="btn">
        <h3> * </h3>
    </button>
    <button class="btn">
        <h3> ⌫ </h3>
    </button>
    <button class="btn">
        <h3> 7 </h3>
    </button>
    <button class="btn">
        <h3> 8 </h3>
    </button>
    <button class="btn">
        <h3> 9 </h3>
    </button>
    <button class="btn btn-enter">
        <h3> ENTER </h3>
    </button>
    <button class="btn">
        <h3> 4 </h3>
    </button>
    <button class="btn">
        <h3> 5 </h3>
    </button>
    <button class="btn">
        <h3> 6 </h3>
    </button>
    <button class="btn">
        <h3> + </h3>
    </button>
    <button class="btn">
        <h3> 1 </h3>
    </button>
    <button class="btn">
        <h3> 2 </h3>
    </button>
    <button class="btn">
        <h3> 3 </h3>
    </button>
    <button class="btn">
        <h3> - </h3>
    </button>
    <button class="btn btn-0">
        <h3> 0 </h3>
    </button>
    <button class="btn">
        <h3> . </h3>
    </button>
</div>

步骤2：修改CSS实现跨列/跨行 #

调整.buttons的网格设置，并给特殊按钮添加跨度属性：

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid black;
    background-color: whitesmoke;
}

/* 0按钮横向占2列 */
.btn-0 {
    grid-column: span 2;
}

/* ENTER按钮纵向占2行 */
.btn-enter {
    grid-row: span 2;
}

原理说明 #

• grid-column: span 2：让元素占据当前行的2个网格列轨道，实现横向扩展
• grid-row: span 2：让元素占据当前列的2个网格行轨道，实现纵向扩展
  这种方式只会改变目标元素的占据范围，不会影响其他单元格的尺寸，完全符合需求。

内容的提问来源于stack exchange，提问作者Danny Chen