NaN width and height

[MarcGodard]

I just copied the most basic example without any styling:

  const id = () => "_" + Math.random().toString(36).substr(2, 9);

  let items = [
    gridHelp.item({ x: 0, y: 0, w: 2, h: 2, id: id() }),
    gridHelp.item({ x: 2, y: 0, w: 2, h: 2, id: id() }),
  ]

and

    <Grid cols={3} bind:items={items} let:item={item}>
      <div>{item.id}</div>
    </Grid>

This is what shows in the console.

Can't figure out what i am missing.

[vaheqelyan]

Take a look at this example https://github.com/vaheqelyan/svelte-grid/blob/master/www/src/routes/examples/basic.svx cols -> it is a 2d array. [ [1000, 6], [800, 3] ], breakpoint size, column size.

suppose that if your container is 1000px wide, your columns change by six, etc. so it changes to 6, then it will search for your item and find the key 6.

gridHelp.item({
  6: { w: N, h: N, x: N, y: N },
  3: { w: N, h: N, x: N, y: N },
})

[MarcGodard]

@vaheqelyan Thanks for your help. However, I changed the existing cols attribute with the 2d array, and same results.

  const id = () => "_" + Math.random().toString(36).substr(2, 9);

  const cols = [
    [ 1100, 6 ],
  ]

  let items = [
    {
      6: gridHelp.item({
        x: 0,
        y: 0,
        w: 2,
        h: 2,
      }),
      id: id(),
    },

    {
      6: gridHelp.item({
        x: 2,
        y: 0,
        w: 2,
        h: 2,
      }),
      id: id(),
    },
  ];

and

    <Grid bind:items={items} let:item={item} {cols}>
      <div>{item.id}</div>
    </Grid>

[vaheqelyan]

You missed creating a container. 1100is the width of your container.

<style>
.container {
  max-width: 1100px;
  width: 100%;
}
</style>

<div class=container>
  <Grid />
</div>

[MarcGodard]

Now is working for width but not height. lol

I am guessing I need to do the same for height?

Will play more with this.

[vaheqelyan]

Please specify rowHeight

[vaheqelyan]

Feel free to reopen

[MarcGodard]

Sorry, but I built my own it its good. Thanks for your help.