Add an option to define a default `span` of all fixed grid items via `KFixedGrid` prop

[MisRob]

Product

Kolibri

Desired behavior

It's possible to define a default KFixedGridItem's span via a KFixedGrid prop (called itemSpan in the following example).

For example:

<KFixedGrid numCols="12">
  <KFixedGridItem span="4" />
  <KFixedGridItem span="4" />
  <KFixedGridItem span="4" />
</KFixedGrid>

could be newly also defined as:

<KFixedGrid numCols="12" itemSpan="4">
  <KFixedGridItem />
  <KFixedGridItem />
  <KFixedGridItem />
</KFixedGrid>

itemSpan would be treated as a default value for all three KFixedGridItem's span values in this grid. If there's a KFixedGridItem with its own span value defined, such value would take preference over the default value for that particular item.

Current behavior

span needs to be defined on KFixedGridItem and if it's not defined, the item will span the full width of the grid

The Value Add

In Kolibri, we have the CardGrid component and use it in the following way:

CardGrid type 1

• Level 3+: 3 cards on a row
• Level 2: 2 cards on a row
• Level 1: 1 card on a row
• Level 0: 1 card on a row

Level 3+	Level 2	Level 1	Level 0

CardGrid type 2

• Level 3+: 4 cards on a row
• Level 2: 3 cards on a row
• Level 1: 2 card on a row
• Level 0: 1 card on a row

Level 3+	Level 2	Level 1	Level 0

CardGrid is responsible for defining how many cards are displayed on one row and therefore, cards components don't need to contain any layout information in regards to its mother grid, which in this case makes implementation much simpler because:

1. when compared to the need to use the span attribute on KFixedGridItem, with this approach there is no coupling of card components to the grid component, so any of the cards can be used easily in any of those two grid types
2. it's much easier to define complex responsive behavior in one place when compared to having it spread across all cards components that are allowed to be used from within the grid

When I tried to use KFixedGrid/KFixedGridItem instead of CardGrid/CardLink, I found it challenging for these reasons. I think that having a possibility to define a default item span from within KFixedGrid would allow us to be more flexible overall and opened a way for being able to use KFixedGrid instead of CardGrid.

You can see Kolibri grid and cards here

Possible Tradeoffs

I am not aware of any tradeoffs since this would be an alternative way of defining layouts. Any thoughts?

[MisRob]

For the sake of simplicity and because it's just some initial thoughts, I opened this issue for KFixedGrid and its items but I assume that if we decide to implement this, it might be good to extend it for KGrid too? It might require some more thinking about how to make KGrid's API readable since it's a bit more complicated than KFixedGrid due to the possibility to define different spans for different layouts.

[indirectlylit]

thanks for this idea. Would you mind posting a couple screenshots of the example provided in the 'value add' section to help visualize?

[MisRob]

@indirectlylit Thank you, I've just posted the screenshots and also tried to update the description to be more clear

[MisRob]

If we wanted to be fancy, maybe we could even try something like this?

<KFixedGrid numCols="12" :itemsSpans="[3, 3, 6]">
  <KFixedGridItem />
  <KFixedGridItem />
  <KFixedGridItem />
</KFixedGrid>

[MisRob]

@sairina This is a proposal for a feature that we might implement or not, and we don't know yet exactly what API would that be, whereas https://github.com/learningequality/kolibri/issues/8988 seems to be rather a bug related to the usage of the grid that's not supported and might not still be supported in the future so I don't see the clear link. What did you mean by "directly affected"?

[sairina]

Oh that's helpful. I think I misunderstood this KDS proposal. I'll unlink the issues. Thanks!

[MisRob]

Closing since we'll have another component for cards display in a grid.