What is the most efficient way to make a pattern of Div elements with incrementing ID's as numbers?
I want to have 56 columns and 80 rows. The first div created in the top left corner would have an id of 1, and the last div created in the bottom right corner would have an id of 4480.
I know I can do:
<style>
.myGrid{
display:grid;
grid-template-columns: 1fr 1fr 1fr and so on...;
grid-gap:5px;
grid-auto-rows: 50px;
grid-auto-columns: 50px;
}
</style>
<body>
<div class = "myGrid">
<div class = "gridItem" id = "1"><div>
<div class = "gridItem" id = "2"><div>
<div class = "gridItem" id = "3"><div>
and so on...
</div>
</body>
But this will take 100 years to type out, and I know there must be a better way.
The reason I want the id to increment is that I would like to target them with javascript once I have the grid pattern complete.
grid-template-columns:repeat(56,1fr)
maybe ?let gridChild = document.querySelectorAll(".mygrid>div"); for (let i = 0; i < gridChild.length; i++) {gridChild[i].setAttribute('id','grid-' + i); }