如何创建具有偶数行和列的动态网格？

Question

我正在尝试创建一个网格，它接受用户输入并将其用作行数和列数。换句话说，如果用户输入 X，我希望网格有 X 行和 X 列，并且是方形的，这意味着框的高度和它们的宽度一样。

我已经让它与 JavaScript 和 CSS 网格一起工作，但前提是我已经知道 rows/columns 的数量，在这种情况下是 10。请看下面。

如何创建一个具有相同功能但具有任意数量的行和列的网格？

 #container {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   width: 500px;
   height: 500px;
 }

 div {
   width: 100%;
   height: 100%;
   outline: 1px solid;
   float: left;
 }

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>

  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
  </body>
  <script>
    let btn = document.getElementById("start")
    btn.addEventListener("click", createGrid)

    function createGrid() {
      let numberOfRows = prompt("How many rows do you want?");
      let i = 0;
      let x = numberOfRows ** 2;

      for (i; i < x; i++) {
        var div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.addEventListener("mouseenter", function() {
          this.style.backgroundColor = "red";
        });
      }
    }

  </script>

</html>

Answer 1

您可以为此使用 CSS 变量。并使用 javascript.

更改变量值

let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid)

  function createGrid() {
  var Container = document.getElementById("container");
Container.innerHTML = '';
  
    let numberOfRows = prompt("How many rows do you want?");
    let i = 0;
    let x = numberOfRows * numberOfRows;
    
    document.documentElement.style.setProperty("--columns-row", numberOfRows);
    for (i =  0; i < x ; i++) {
      var div = document.createElement("div");
      document.getElementById("container").appendChild(div);
      div.addEventListener("mouseenter", function () {
      this.style.backgroundColor = "red";
    });
  }
}

:root {
  --columns-row: 2;
}

 
 #container {
      display: grid;
      grid-template-columns: repeat(var(--columns-row), 1fr);
      grid-template-rows: repeat(var(--columns-row), 1fr);
      width: 500px;
      height: 500px;
  }

  div {

     border: 1px solid #000;
  
  }

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>
  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container">
    </div>
  </body>

</html>

Answer 2

根据需要更改 css。 jsfiddle.net/926pd5oh/9

<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
<style>
  #container>div {
    width: 100%;
    height: 10px;
    margin: 2px;
  }

  #container>div>div {
    float: left;
    height: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 25px;
  }
</style>
<script>
  let btn = document.getElementById("start")
  btn.addEventListener("click", createGrid);

  function createGrid() {
    let numberOfRows = prompt("How many rows do you want?");
    document.getElementById("container").innerHTML = "";
    console.log(numberOfRows);
    for (let i = 0; i < numberOfRows; i++) {
      var divRow = document.createElement("div");
      document.getElementById("container").appendChild(divRow);
      for (let y = 0; y < numberOfRows; y++) {
        let divCol = document.createElement("div");
        divCol.addEventListener("mouseenter", function () {
          this.style.backgroundColor = "red";
        });
        divRow.appendChild(divCol);
      }

    }
  }
</script>

Answer 3

我最终使用了不同的工具：container.style.gridTemplateColumns 和 container.style.gridTemplateRows 来影响容器的行数和列数。这允许我不使用上面的 :root 函数。请参阅 JavaScript 语法 https://www.w3schools.com/cssref/pr_grid-template-columns.asp

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
  </head>
  <body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
  </body>
  <script>


  //randomColor function is taken from http://www.devcurry.com/2010/08/generate-random-colors-using-javascript.html //
  function randomRgb(value) {

  col =  "rgb("
  + randomColor(255) * value + ","
  + randomColor(255) * value + ","
  + randomColor(255) * value + ")";
  }

  function randomColor(num) {
    return Math.floor(Math.random() * num);
  }

  function resetColorOfBoxes() {
    boxes = document.querySelectorAll('div');
    boxes.forEach(box => box.style.backgroundColor = "white");
  }

  function promptEntry() {

    let userInput = prompt("How many rows would you like?", "Enter a number");

    if (isNaN(userInput)) {
      alert("That's not a valid entry. Try again");
      promptEntry();
    }

    else {
      createGrid(userInput);
    }
  }

  function createGrid(numberOfRows) {

    resetColorOfBoxes()

    let gridTemplateColumns = 'repeat('+numberOfRows+', 1fr)'

    var container = document.getElementById("container");
    container.style.gridTemplateColumns = gridTemplateColumns;
    container.style.gridTemplateRows = gridTemplateColumns;

    let brightness = [];

    let i = 0;
    let numberOfBoxes = numberOfRows**2;

    /*Create boxes*/
    for (i; i < numberOfBoxes ; i++) {
      brightness[i+1] = 1;
      console.log(brightness);

      var div = document.createElement("div");
      div.classList.add(i+1);
      document.getElementById("container").appendChild(div);

      div.addEventListener("mouseenter", function () {
        var className = this.className;
        brightness[className] = brightness[className] - 0.1;
        console.log(brightness[className]);
        randomRgb(brightness[className]);
        this.style.backgroundColor = col;
      });
    }
  }

  let btn = document.getElementById("start")
  btn.addEventListener("click", promptEntry)

  </script>
</html>

如何创建具有偶数行和列的动态网格？

How to create a dynamic grid with even number of rows and columns?

javascript

css

css-grid