CSS3 Grid - 为什么行没有按列/行 stmt 定位答案

【问题标题】：CSS3 Grid - why the rows are not positioned as per column/row stmtCSS3 Grid - 为什么行没有按列/行 stmt 定位
【发布时间】：2017-03-18 06:44:49
【问题描述】：

我正在尝试使用grid 布局设计带有上/确定/下/左/右按钮的电视遥控器。问题是结果出乎我的意料。我只是想定义 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>

【问题讨论】：

标签： css css-grid

【解决方案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>

【讨论】：