Vue - How to dynamically set a grid area name

Question

I have a list of objects that I loop through and generate inside the template. Those objects need to be positioned differently inside the grid depending on the screen size.

So I would like to use the grid-area property in CSS to define their positions in different screen sizes. But the problem I am facing is that I cannot find how to dynamically define the grid-area name for each of the elements.

I have tried doing to following, but it doesn't work. I have searched online but didn't find any solutions. The title variable is a string that contains the name that needs to be set for the grid-area property.

:style="{ title: gridArea }"

Answer 1

For a "double name property" you could wrap it in string

<div class="block" :style="{ 'grid-area': title }">...</div>