如何使用 JavaScript 创建一个 4 行 7 列的网格？

Question

我是 JavaScript 的新手，需要一些帮助！

我正在尝试创建类似键盘的东西：创建一个网格，然后插入带有字母的按钮。 我希望它是 4 行，每行有 7 列。 我试图只创建一行多列，但它不起作用，它只创建一行一列。 我该如何解决？

HTML：

<div class="row justify-content-center container" id="buttons-space"></div>

JavaScript：

var alphabet =["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

function createKeyboard() {
  var space = document.getElementById("buttons-space");
  var row = document.createElement("div");
  row.id = "first-row";
  row.className = "row container";
  space.appendChild(row); 
  for (var i = 1; i <= 7; ++i) {
    var col = document.createElement("div");
    col.className = "col-1 my-2 mx-2";
    document.getElementById("first-row").appendChild(col); 
    var button = document.createElement("button");
    button.className = "btn btn-warning";
    button.style = "height: 40px; width: 40px";
    button.id = alphabet[i];
    button.innerText = alphabet[i];
    col.appendChild(button);
  }
}

Answer 1

 const alphabet = Array(26).fill(0).map((x,i)=>String.fromCharCode(i+97)); document.querySelector('.grid-container').innerHTML = alphabet.map(alpha=>`<div class="grid-item">${alpha}</div>`).join('');

 .grid-container { display: grid; grid-template-columns: repeat(7, 20px); background-color: #2196F3; padding: 2px; }.grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 2px; font-size: 15px; text-align: center; }

 <div class="grid-container"> </div>

我希望它是 4 行，每行有 7 列

动态使用属性grid-template-columns将为每行提供 7 个列。 来自w3schools的示例。