CSS3網格 - 爲什麼行不按每列/行定位

Question

我試圖用grid佈局設計帶有/ OK /向下/向左/向右按鈕的電視遙控器。問題在於結果對我來說是意想不到的。我只想定義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

你的主要問題是，你已經設置你的內在要素類，並且是造型IDS

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