当此代码显示在Google Chrome中时,显示的唯一格式是颜色。每个<div>
只是按照html代码中列出的顺序堆叠在一起
How it's shown in Chrome
#grid {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
}
#title {
grid-column: 1;
grid-row: 1;
background-color: blue;
}
#score {
grid-column: 1;
grid-row: 3;
background-color: gray;
}
#stats {
grid-column: 1;
grid-row: 2;
align-self: start;
background-color: fuchsia;
}
#board {
grid-column: 2;
grid-row: 1 / span 2;
background-color: green;
}
#controls {
grid-column: 2;
grid-row: 3;
justify-self: center;
background-color: red;
}
&#13;
<div id="grid">
<div id="title">Game Title</div>
<div id="score">Score</div>
<div id="stats">Stats</div>
<div id="board">Board</div>
<div id="controls">Controls and more controls</div>
</div>
&#13;
答案 0 :(得分:-1)
感谢您的回复,我没有在CSS中添加html或body元素。添加这些元素后,格式化了。再次感谢。