Search code examples
cssvue.jsdynamic-binding

Vue - How to dynamically set a grid area name

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 }"
Solution

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

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