I want to create a css grid with 100 grid cells. The only important thing is that there will always be 100 cells. How many columns and rows there are does not matter too much. I am a little lost how I could achieve this with the

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

properties.

CodePudding user response：

Style for container :

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

Then create 100 elements (cells) as children.

CodePudding user response：

I got you,

there are multiple ways to achieve this like 1*100=100, 2*50=100, 4*25=100, 5*20=100.

so you can you any of them and any order means first is row/column or and 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

YOu can see result by inspecting #parent div in dev-tools/inspect mode.