Dynamic CSS Grid using Vue

Question

I am trying to build a CSS grid based Vue component, something like this.

<Grid :cells="7" :columns="{xs: 2, sm: 3, md: 4, lg: 5}" />

The xs, sm, md and lg basically tell the component how many columns should be rendered based on some predefined breakpoints.

In the component's template itself, I am doing the following.

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
</div>

Now this generates my grid alright. However, I am not able to figure out a way to pass a different child to each of these cells created. Basically, each cell in the grid can have different content. How do I pass this content data from the Grid component? As children, slot, data prop or what else?

Edit: Most people are finding this confusing, so a little more details.

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
    {{cell}}
</div>

With this I will get a unique number in every cell of the CSS grid. I want this data to come from the user.

Something like,

<Grid>
    <div>content from here should go in Cell #1</div>
    <div>content from here should go in Cell #2</div>
    <div>content from here should go in Cell #3 and so on</div>
</Grid>

I have the entire component hosted here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/Grid/Grid.vue and the way to use it is in App.vue or above in this question.

Any help regarding this, is greatly appreciated! Looking forward to it!

What do you mean by pass a different child to each of these cells? — tony19
@tony19 basically, each cell in the grid can have different content. How do I pass this content data from the Grid component? As children, slot, data prop or what else? — Shreerang

jremi jremi · Accepted Answer · 2018-11-06T17:24:19

as @tony19 said... I'm not sure exactly what you are trying to accomplish... but maybe something like this could work for you....

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
 <div id="mychild1" v-if="cell === 'foo'></div>
 <div id="mychild2" v-else-if="cell === 'boo'></div>
 <div id="mychild3" v-else-if="cell === 'doo'></div>
</div>

Dynamic CSS Grid using Vue

1 Answers