网格模板区域未能放置网格项目答案

【问题标题】：grid template areas failing to place grid items网格模板区域未能放置网格项目
【发布时间】：2021-10-15 10:09:25
【问题描述】：

我正试图围绕 css 网格进行思考，但在这段代码中，网格模板区域并没有像我期望的那样运行。我需要我的 WinLoseDisplay 跨越 2 列，但它只占用一列，而不是让我的页面网格看起来像这样：

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

看起来像这样

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

任何帮助将不胜感激

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

【问题讨论】：

标签： html css css-grid

【解决方案1】：

您在网格项目上使用了错误的属性。

不要使用grid-template。使用grid-area。

grid-template 属性适用于容器。它是以下的简写：

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

因此，您的网格项目规则（例如 grid-template: "b"）分解为：

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

这些规则不适用于网格项目。它们只适用于网格容器。

改为使用grid-area: b。 (Note that the values are not in quotes.)

然后，确保每个网格项都有一个唯一的 grid-area 名称，以便它们可以单独放置在 grid-template-areas 规则中。