Search code examples
javascriptcsscss-gridsveltesvelte-component

Create CSS Grid with for each loop

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!

Solution

  • 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}