CSS3网格 - 为什么行不按每列/行定位

我试图用grid布局设计带有/ OK /向下/向左/向右按钮的电视遥控器。问题在于结果对我来说是意想不到的。我只想定义3行3列，并在它们之间平均分配特定的位置和空间。我究竟做错了什么？该result看起来像这样CSS3网格 - 为什么行不按每列/行定位

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>

来源

2017-03-18 mike

你的主要问题是，你已经设置你的内在要素类，并且是造型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>

来源

2017-03-18 07:31:28 vals

CSS3网格 - 为什么行不按每列/行定位

回答

相关问题