Create CSS Grid with for each loop-CodePudding

So I found part of this code online and I am stuck the past couple hours on this simple problem. I am trying to add a property grid-row and grid-column to the cell class, because I want to add a DIV which overlaps all the cells.

This is the behavior I am currently getting: https://svelte.dev/repl/4888e5b498a442298ca8862a68b55ee6?version=3.49.0

This is the expected working end result, but here the properties gird-row and grid-column are missing in the cell class: https://svelte.dev/repl/8da356605a36450187cbcbcdaf4a6188?version=3.49.0

Thank you so much for helping me out!

CodePudding user response：

The each indexes are 0-based, grid properties are 1-based, so you probably need:

style="grid-row: {i   1}; grid-column: {j   1};"

Or with style directives:

style:grid-row={i   1}
style:grid-column={j   1}