为什么我的网格模板区域会导致我的网格拉伸？

Question

我的两个网格区域（reset 和 equals）正在推动其余的网格对齐，我不确定问题是什么。感谢指导。

代码如下：

.calc-buttons {
  display: grid;
  height: 400px;
  width: 500px;
  padding: 30px 30px;
  border-radius: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 30px;
  grid-template-areas:     
    'seven eight nine del'
    'four five six plus'
    'one two three sub'
    'dot zero divide times'
    'reset reset equals equals';';
  background: var(--toggle-background);
}

<div class="calc-buttons">
  <button class="seven std">7</button>
  <button class="eight std">8</button>
  <button class="nine std">9</button>
  <button class="del sm-bl">DEL</button>
  <button class="four std">4</button>
  <button class="five std">5</button>
  <button class="six std">6</button>
  <button class="plus std">+</button>
  <button class="one std">1</button>
  <button class="two std">2</button>
  <button class="three std">3</button>
  <button class="sub std">-</button>
  <button class="dot std">.</button>
  <button class="zero std">0</button>
  <button class="divide std">/</button>
  <button class="times std">x</button>
  <button class="reset lg-bl">RESET</button>
  <button class="equals lg-rd">=</button>
</div>

reset 和 equals 应该跨越两个 1fr，而不改变其他按钮的对齐方式。

这是它的外观。

Answer 1

问：为什么我的网格模板区域会导致我的网格拉伸？

A：那是因为您定义的网格模板区域名称不会自动转换为 CSS 类（您似乎假设）。

解决方案：您从不分配已定义的网格模板区域。为此，您需要明确将grid-area: area-name; 分配给相关元素。

.calc-buttons {
  display: grid;
  height: 400px;
  width: 500px;
  padding: 30px 30px;
  border-radius: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 30px;
  grid-template-areas:     
    'seven eight nine del'
    'four five six plus'
    'one two three sub'
    'dot zero divide times'
    'reset reset equals equals';';
  background: var(--toggle-background);
}

.calc-buttons :last-child { grid-area: equals; }
.calc-buttons :nth-last-child(2) { grid-area: reset; }

<div class="calc-buttons">
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>DEL</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>+</button>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>-</button>
  <button>.</button>
  <button>0</button>
  <button>/</button>
  <button>x</button>
  <button>RESET</button>
  <button>=</button>
</div>