The concept of the CSS grid layout, as explained here, demonstrates that the grid cells are structured in the markup without hierarchy. The arrangement into rows and columns is managed through CSS directives like grid-template-columns.
An illustration for a 4 column x 2 row grid would resemble:
<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
I'm experiencing challenges applying this grid approach with a template language, where an iterator loops over records, creating a row container for each element. Instead of laying out the individual elements, the grid arranges the row containers.
Using Vue template as an instance, the above scenario could be dynamically generated in this manner:
<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
<div v-for='item in items>
<div>{{item.a}}</div>
<div>{{item.b}}</div>
<div>{{item.c}}</div>
<div>{{item.d}}</div>
</div>
</div>
...however, this results in rendering 4 blocks of each item in a row (instead, I wish for item.a ... item.d to compose the row elements, treating each item as a row).
Is there a method to achieve this? Or is it generally unattainable using a template language?