Add possibility to add more than one grid on a page

[sir-marc]

I am building a site which loads all entries and displays them as a slider.
Therefore all entries are rendered in the same html structure.
Now i ran into an issue because i add the generated css code inside a <style scoped> attribute right next to the grid itself.

(If this is not how it is intended to use it, can you please explain how it is?)

My template looks like this:

<style scoped>
    {{ craft.grid.value(entry.gridmatrix.all(), entry.grid).css }}
</style>
{% grid entry.gridmatrix.all() using entry.grid as gridItems with { classes: 'grid-'~entry.id } %}
    {% for item in gridItems %}
        {% griditem with { classes: "grid-item" }%}
            {# rendering grid items #}
        {% endgriditem %}
    {% endfor %}
{% endgrid %}

Each item gets a class grid__grid__gridmatrix__item--{index}, but because i have multiple grids on the same page, this will get overridden by the last appearing grid.

I'm aware one can add custom classes to the grid elements, but this won't help, as they won't be used in the generated css selectors.

Possible solution:
Add a property to the grid element to set the base class which will then also be used in the generated css. (Or don't add a new property but instead use the existing class property to generate the css)

[wbrowar]

Hey Marc, that makes sense. I'll take a look and see if it makes sense to let you set the base class or at least let you add in other classes (or maybe both). Thanks!