How do I render markup for a css grid with Vue?

Question

I want to start using css grid. With grid, there is no <tr> element. All top level children of a grid container become cells. The layout engine breaks them into lines based on their attributes, and the number of columns in the grid-template-columns rule. And there's the rub: without a <tr>, where do I put my v-for? Each iteration of v-for needs to generate n elements. I need a magic disappearing element that leaves no trace in the rendered output (no trace of itself, but renders all it's children). Does this exist? How do people deal with this?

tony19 · Accepted Answer · 2022-07-15 21:18:11Z

4

Ok found it. Here's a little record if anyone follows me here.

Put the v-for on a template element.

edited Jul 15, 2022 at 21:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 3, 2017 at 15:36

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Carrell Over a year ago

Holy crap that's genius! Using a <div> rather than a <template> with display: contents works too but has poor browser support.

Collectives™ on Stack Overflow

How do I render markup for a css grid with Vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related