CSS3グリッド - 列/行stmtごとに行が配置されない理由

Question

gridレイアウトを使用して、上/下/左/右ボタンでTVリモコンを設計しようとしています。問題は、結果が私には予想外であるということです。私は単に3行3列を定義し、特定の位置とスペースを均等に分割したいと考えています。私は間違って何をしていますか？ resultは、代わりにこの

Up  left OK 
right down 

のように見えます

  Up 
     | 
<left----OK---Right--> 
     | 
     Down 

コード

#grid { 
display: grid; 
grid-template-columns: 
    /* 1 */ auto 
    /* 2 */ auto 
    /* 3 */ auto; 

grid-template-rows: 
    /* 4 */ auto 
    /* 5 */ auto 
    /* 6 */ auto; 
} 

#up { grid-column: 2; grid-row: 1; } 
#ok { grid-column: 2; grid-row: 2; } 
#down { grid-column: 2; grid-row: 3; } 
#left { grid-column: 1; grid-row: 3; } 
#right { grid-column: 3; grid-row: 3; } 

} 

<div id="grid"> 
    <div class="up">Up</div> 
    <div class="left">left</div> 
    <div class="ok">OK</div> 
    <div class="right">right</div> 
    <div class="down">down</div> 
</div> 

Answer 1

あなたの主な問題は、あなたがあなたの内側の要素にクラスを設定し、スタイリングIDできたということです

#grid { 
 
display: grid; 
 
grid-template-columns: 
 
    /* 1 */ auto 
 
    /* 2 */ auto 
 
    /* 3 */ auto; 
 

 
grid-template-rows: 
 
    /* 4 */ auto 
 
    /* 5 */ auto 
 
    /* 6 */ auto; 
 

 
    width: 200px; 
 
} 
 

 
#grid div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: lightblue; 
 
    margin: 3px; 
 
} 
 

 
.up { grid-column: 2; grid-row: 1; } 
 
.ok { grid-column: 2; grid-row: 2; } 
 
.down { grid-column: 2; grid-row: 3; } 
 
.left { grid-column: 1; grid-row: 2; } 
 
.right { grid-column: 3; grid-row: 2; }

<div id="grid"> 
 
    <div class="up">Up</div> 
 
    <div class="left">left</div> 
 
    <div class="ok">OK</div> 
 
    <div class="right">right</div> 
 
    <div class="down">down</div> 
 
</div>