javascript - 如何使用 set heigt 创建棋盘

Question

所以我在 JS 中创建了一个 4x4 的棋盘格，但我想使用 Java 使它成为 4x5（宽度为 5）。但是每当我添加方块时，当我希望它们走到一边时，它们就会走到底部，我认为 CSS 是这里的问题，所以如果你能告诉我我应该使用什么 CSS，那就太好了。

这是我的CSS：

.board {
  display: grid;
  width: 850px;
  height: 850px;
  grid-template-columns: auto auto auto auto;
}
.card {
  width: 200px;
  height: 200px;
  font-size: 150px;
}

而且我知道设置宽度和高度对我正在尝试的东西不利，但删除它们只会让我所有的方块都乱七八糟。预先感谢您的帮助

标签： javascripthtmlcss

Answer 1

您已将其设置为 4 列。将网格模板从列更改为行

.board {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 200px);
  grid-template-rows: repeat(4, 200px);
}
.card {
  width: 200px;
  height: 200px;
  font-size: 150px;
}