My goal is to render a list of elements randomly placed inside a grid.
I tried to achieve this with the cue-computed property. But unfortunately I’m always getting the error:

- rendered on server: style="grid-column:12;"
  - expected on client: style="grid-column: 10"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 

In order to avoid CLS, I don’t wanted to first set the visibility of the component to hidden and after placement set it back to visible.

I tried it with the following code:

const computedStyle = computed(() => {
   const letters = '0123456789ABCDEF'
   let color = '#'
   for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)]
   }
   const style = `background: ${color}; grid-column: ${useRandomnumber(0, 12, 1)} / span 3`

   return style
})

<template>
   <div class="box" ref="item" :style="computedStyle"></div>
</template>

I tried solving this issue with a computed variable. But it doesn’t work as expected. The idea behind this choice is, that I also want to adjust the grid-column: _ / span ... properly based on the grid of the viewport with.

But just like I said, I’m always getting the style-mismatch error..