CSS 具有固定数量的 100 个网格单元格但灵活的行数和列数的网格

Question

我想创建一个包含 100 个网格单元的 css 网格。唯一重要的是总会有 100 个单元格。有多少列和行并不重要。我有点迷失了如何用

实现这一目标

grid-template-rows: ...
grid-template-columns: ....

属性。

Answer 1

容器样式：

grid-template-rows: repeat(5,auto);
grid-template-columns: repeat(20,auto);

然后创建 100 个元素（单元格）作为子元素。

编辑

完整答案：

HTML CODE:

<div class="parent"></div>

CSS CODE:

.parent {
  display: grid;
  grid-template-rows: repeat(20, auto);
  grid-template-columns: repeat(5, auto);
  gap: 10px;
}

.child {
  width: 100px;
  height: 100px;
  background-color: black;
}

JS CODE:

创建 100 个元素

let div = document.querySelector("div");
for (let i = 1; i <= 100; i++) {
  let child = document.createElement("div");
  child.className = "child";
  div.append(child);
}

注意：此编辑创建5列20行

Answer 2

我找到你了，

有多种方法可以实现这一点，例如 1*100=100、2*50=100、4*25=100、5*20=100。

所以你可以使用它们中的任何一个，任何顺序意味着第一个是 row/column 或者第二个是 row/column。

let row = [1, 2, 4, 5, 100, 50, 25, 20];
let column = [100, 50, 25, 20, 1, 2, 4, 5];

let parent = document.getElementById("parent");


parent.style.gridTemplateColumns = `repeat(${column[0]}, 1fr)`;


parent.style.gridTemplateRows = `repeat(${row[0]}, 1fr)`;

#parent {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

<div id="parent">

</div>

您可以在 dev-tools/inspect 模式下检查 #parent div 来查看结果。

CSS 具有固定数量的 100 个网格单元格但灵活的行数和列数的网格

CSS Grid with fixed number of 100 grid cells, but flexible number of rows and colums

css

grid