grid template areas failing to place grid items

Question

I am trying to wrap my head around css grids, but in this code the grid template areas are not functioning as i would expect them to. I need my WinLoseDisplay to span 2 columns, but it just takes up one column and instead of having my page grid look like this:

" b d d"
" b b b"
" b b b"

It looks like this

" b d b"
" b b b"
" b b  "

Any help would be much appreciated

.MainContainer {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 20px;
  grid-template-areas: "b d d" "b b b" "b b b"
}

.ButtonRock {
  grid-template: "b";
}

.WinLoseDisplay {
  grid-template: "d";
}

.ButtonPaper {
  grid-template: "b";
}

.PlayerSelection {
  grid-template: "b";
}

.PcSelection {
  grid-template: "b";
}

.ButtonScissors {
  grid-template: "b";
}

.ButtonPlay {
  grid-template: "b";
}

.Placeholder {
  grid-template: "b";
}

<div class='MainContainer'>
  <div class='ButtonRock a'>
    <button id='Rock'>Rock</button>
  </div>
  <div class='WinLoseDisplay'>
    winlosedisplay
  </div>
  <div class='ButtonPaper a'>
    <button id='Paper'>Paper</button>
  </div>
  <div class='PlayerSelection a'>
    player selection
  </div>
  <div class='PcSelection a'>
    pc selection
  </div>
  <div class='ButtonScissors a'>
    <button id='Scissors'>Scissors</button>
  </div>
  <div class='ButtonPlay a'>
    <button id='Play'>Play</button>
  </div>
  <div class='Placeholder a'>
    placeholder
  </div>
</div>

Michael Benjamin · Answer 1 · 2021-08-12T11:59:05.513

You're using the wrong property on the grid items.

Don't use grid-template. Use grid-area.

The grid-template property applies to containers. It's a shorthand for:

grid-template-columns
grid-template-rows
grid-tempate-areas

So your grid item rules—such as grid-template: "b"—breaks down to this:

grid-template-rows: auto
grid-template-columns: none
grid-template-areas: "b"

These rules don't apply to grid items. They only work on a grid containers.

Instead, use grid-area: b. (Note that the values are not in quotes.)

Then, makes sure that each grid item has a unique grid-area name, so they can each be individually placed in the grid-template-areas rule.

Related (but not duplicates):

grid template areas failing to place grid items

1 Answers1