CSS格子レイアウトは何もしません

Question

このコードがGoogle Chromeに表示されるとき、表示される唯一の書式は色です。それぞれ<div>は、htmlコードで設定されている順番で互いに重なり合っています。回答者の私は私のCSSに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; 
 
}

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

Answer 1

感謝。これらの要素を追加した後、書式設定がドロップされました。再度感謝します。