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

`:style="{ gridArea: xxx }"` -> https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area — Mr T, Mar 23 '21 at 08:53
Yes, it correct. Plus it is a string that doesn't have any spaces. The words are separated by a '_'. — Stephen, Mar 23 '21 at 08:54

score 3 · Accepted Answer · answered Mar 23 '21 at 08:55

3

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

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

answered Mar 23 '21 at 08:55

Dejan.S

18,571
22
69
112

Thank you very much! This is the solution :D!! – Stephen Mar 23 '21 at 08:55
1

I can and will do that in 8 mins :) – Stephen Mar 23 '21 at 08:56

Vue - How to dynamically set a grid area name

1 Answers1