当网格的大小发生变化时，有没有办法让网格的单元格填充空间？答案

【问题标题】：Is there a way to make the cells of a grid fill in the space when the grid's size changes?当网格的大小发生变化时，有没有办法让网格的单元格填充空间？
【发布时间】：2023-01-07 01:36:41
【问题描述】：

我正在制作一个网格，但我不确定如何在网格大小发生变化时让单元格填充它们之间的空间。

我有一个生成网格并将大小作为参数接收的函数。

应该向 grid-square 类添加什么以使单元格填满整个空间？

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#" + hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    container.appendChild(newDiv);
  }
}

createDivs(2);

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;

  width: 50%;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Etch a Sketck</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

【问题讨论】：

（题外话）忘记 mouseover/mouseout 的存在。始终坚持mouseenter和mouseleave。好吧，除非你真的，真的知道你在做什么。
（题外话）event.target 应该（在 99% 的情况下）与 .closest() 结合使用。由于这不是您的特定用例，因此请改用 event.currentTarget。
我真的不知道你的意思？容器为 50vw，其中的项目宽度为 50%，因此子元素将始终两两堆叠。你想达到什么目的？
有没有理由不使用 CSS 网格（并且没有专门设置单元格的宽度）？
网格绝对是去这里恕我直言的方式。

标签： javascript html css

【解决方案1】：

所以这就是我做的方式。我从 flex box 更改为 grid。 Grid 有一个名为 grid-template-columns 的属性，它定义了你有多少列以及每列的宽度。这里的语法是grid-template-columns: repeat(n, 1fr)，其中 n 是您想要的列数。

为了在 javascript 中设置列号，我使用了 css custom property（也称为 css 变量）来定义列号。为了设置自定义属性本身，我设置了元素的样式属性以在加载时定义该属性。

看看下面：

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#" + hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    container.appendChild(newDiv);
  }
  // Added this
  container.style.cssText="--cols: "+size; 
}

createDivs(5);

* {
  box-sizing: border-box;
}
#container {
  /* added this */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  /* end of added css */
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

谢谢你@亚当。我自己想出了一个解决方案，但由于我认为在这种情况下使用 CSS 网格更好，所以我会将您的回复标记为解决方案。

【解决方案2】：

解决方案是在创建单元格时设置宽度。

//get the grid div
const container = document.querySelector("#container");

function changeColor(e) {
  const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
  e.target.style.backgroundColor = "#" + hoverColor;
}

function createDivs(size) {
  //generate grid elements
  for (let i = 0; i < size * size; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    //Setting the width
    newDiv.style.width = 100 / size + "%";
    container.appendChild(newDiv);
  }
}

createDivs(6);

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  flex-wrap: wrap;
}

.grid-square {
  background-color: white;
  width: 50%;
  aspect-ratio: 1/1;
}

.grid-square:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Etch a Sketck</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

【讨论】：