我试着理解CSS网格，但在这段代码中，网格模板区域并没有像我期望的那样发挥作用。我需要我的WinLoseDisplay跨越2列，但它只占用一列，而不是让我的页面网格看起来像这样：

<代码>"；B d d"；"；B B B"；"；B B B"；

它看起来像这样

<代码>"；B D B"；"；B B B"；"；B B"；

任何帮助都将不胜感激。

<代码>.MainContainer{显示：网格；网格-模板-列：200px 200px 200px；网格间隙：20px；网格模板区域：“ B D D ” B “ B ”}.按钮摇滚{网格模板：“ B ”；}.winlosedisplay{网格模板：“ D ”；}.钮扣纸{网格模板：“ B ”；}.PlayerSelection{网格模板：“ B ”；}.PCSelection{网格模板：“ B ”；}.纽扣剪刀{网格模板：“ B ”；}.按钮播放{网格模板：“ B ”；}.占位符{网格模板：“ B ”；}

<代码><；DIV类=' MainContainer '>；<；DIV类=' ButtonRock A '>；<；button ID=' rock '>；rock<；/button>；<；/DIV>；<；DIV类=' winlosedisplay '>；WinLoseDisplay<；/DIV>；<；DIV类=' ButtonPaper A '>；<；button ID='纸张'>；纸张<；/button>；<；/DIV>；<；DIV类=' PlayerSelection A '>；球员选择<；/DIV>；<；DIV类=' PCSelection A '>；PC选择<；/DIV>；<；DIV类='纽扣剪刀A '>；<；button ID='剪刀'>；剪刀<；/button>；<；/DIV>；<；DIV类='按钮播放A '>；<；button ID='播放'>；播放<；/button>；<；/DIV>；<；DIV类='占位符A '>；占位符<；/DIV>；<；/DIV>；

顺晟科技：

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

不要使用" 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>
• grid-template
• grid-area

因此，您的网格项规则—如grid-template—细分为：

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

这些规则不适用于网格项。它们只能在网格容器上工作。

而是使用grid-template: "b"。（请注意，这些值不在引号中。）

然后，确保每个网格项都具有唯一的" b d b" " b b b" " b b " 名称，以便可以将每个网格项单独放置在grid-area规则中。

相关（但不重复）：

• 为什么'；我的带有ASCII艺术的网格模板区域不工作？
CSS网格中的
• 网格
区域布局不正确