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

Question

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

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

特性。

标签： cssgrid

Answer 1

我接到你了，

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

所以你可以你其中任何一个，任何顺序都意味着 first isrow/column或 second is 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>

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