Why are my grid-template-areas causing my grid to stretch?-CodePudding

two of my grid areas (reset and equals) are pushing the rest of the grid alignment off and I'm not sure what the issue is. Appreciate the guidance.

Here's the code:

.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 and equals should span two 1fr each without changing the alignment of the other buttons.

Here's how it looks atm.

CodePudding user response：

Q: Why are my grid-template-areas causing my grid to stretch?

A: That is because your defined grid-template area names are not automagically translated to CSS classes (which you seem to assume).

Solution: You never assign the grid template areas you have defined. You need to do that by explicitly assigning grid-area: area-name; to the elements in question.

.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>