我正在尝试使用 grid 设计带有向上/确定/向下/向左/向右按钮的电视 Remote 布局。问题是结果出乎我的意料。我只是想定义 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>
最佳答案
你的主要问题是你已经在你的内部元素上设置了类,并且是样式 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>
关于CSS3 Grid - 为什么行没有按照列/行 stmt 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42871426/