如何让第3、4个li按钮适配同一列？（计算器Grid布局问题）

需求 #

实现4×5的Grid布局，让第3、4个按钮（C和CE）处于同一列上下排列。

原代码问题分析 #

1. grid-template-rows: repeat(4 1fr)语法错误，缺少逗号，且4行不足以容纳所有按钮，应设置为5行
2. 错误地给button元素设置grid-column，但grid容器的直接子元素是li，只有li才能作为grid项参与布局定位

修改后的完整代码 #

CSS #

.container {
  display: grid;
  width: 400px;
  height: 500px;
  border: 1px solid black;
  margin: 50px auto;
  padding: 10px;
  font-weight: 200;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  border-radius: 10px;
  text-align: center;
}

div.buttons ul.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr); /* 修正语法，设置5行 */
  gap: 5px; /* 用gap统一控制间距，替代button的margin */
  padding: 0;
  list-style: none; /* 移除ul默认的列表样式 */
}

/* 定位C和CE按钮所在的li，让它们在同一列上下排列 */
ul.buttons li:nth-child(3) {
  grid-column: 3 / 4; /* 占据第3列 */
  grid-row: 1 / 2;    /* 占据第1行 */
}

ul.buttons li:nth-child(4) {
  grid-column: 3 / 4; /* 占据第3列 */
  grid-row: 2 / 3;    /* 占据第2行 */
}

ul li button {
  font-size: 1rem;
  font-weight: bold;
  padding: 15px;
  border: none;
  border-radius: 10px;
  width: 100%; /* 让按钮填满li的空间 */
  height: 100%;
}

HTML #

<div class="container">
  <h1>Calculator</h1>
  <div class="input-box">
    <input type="text" placeholder="0" />
  </div>
  <div class="buttons">
    <ul class="buttons">
      <li><button type="button" class="openBracket">(</button></li>
      <li><button type="button" class="closeBracket">)</button></li>
      <li><button type="button" class="c">C</button></li>
      <li><button type="button" class="ce">CE</button></li>
      <li><button type="button" class="divide">%</button></li>
      <li><button type="button" class="7">7</button></li>
      <li><button type="button" class="8">8</button></li>
      <li><button type="button" class="9">9</button></li>
      <li><button type="button" class="x">X</button></li>
      <li><button type="button" class="4">4</button></li>
      <li><button type="button" class="5">5</button></li>
      <li><button type="button" class="6">6</button></li>
      <li><button type="button" class="minus">-</button></li>
      <li><button type="button" class="1">1</button></li>
      <li><button type="button" class="2">2</button></li>
      <li><button type="button" class="3">3</button></li>
      <li><button type="button" class="plus">+</button></li>
      <li><button type="button" class="0">0</button></li>
      <li><button type="button" class="dot">.</button></li>
      <li><button type="button" class="divide">/</button></li>
      <li><button type="button" class="equal">=</button></li>
    </ul>
  </div>
</div>

关键修改点 #

• 修正grid行的语法错误，设置为5行以匹配4×5布局
• 将grid定位属性应用到li元素（grid容器的直接子元素），确保布局生效
• 用gap替代button的margin，实现更统一的间距控制
• 设置按钮宽高为100%，让按钮填满所在的grid项空间

内容的提问来源于stack exchange，提问作者MOHAMMAD Ali