KCardGrid: Set the default grid gap to 24px

[MisRob]

Current behavior

By default, KCardGrid has 30px wide row and column gaps:

https://github.com/learningequality/kolibri-design-system/blob/6de7d6fa74dec1758dd07cf9e4908d5df04fb3e4/lib/cards/gridBaseLayouts.js#L8-L9

Expected behavior

As agreed with @jtamiace here, the default value for row and column gaps should be updated to 24px.

Guidance

• KCardGrid documentation

Acceptance criteria

• [ ] All usages of KCardGrid in Kolibri and Studio are reviewed. If 24px is set from there to override the previously default 30px (such as here), Kolibri and Studio pull requests should be open to remove such overrides since they won't be needed anymore.
• [ ] All pull requests have before / after screenshots

[shruti862]

Hey @MisRob , can you assign this issue to me?

[AlexVelezLl]

Thanks @shruti862! I will assign this to you!

[shruti862]

Hey @MisRob, Just wanted to confirm that for resolving this issue I need to do the following :

1. Open a PR in this repo to modify the default grid gap of KCardGrid to 24px.
2. Open a PR in Studio to remove the overrides that set the grid gap to 24px.
3. Open a PR in Kolibri to do the same.

[shruti862]

Hey @MisRob , @AlexVelezLl , I have raised PR please have a look whenever you have a moment and let me know if any changes needed :) A short note that I didn't found any usages of KCardGrid in studio so I raised PR for kds and kolibri only.

[MisRob]

Yes @shruti862, this all makes sense to me and your pull requests look good overall. Thank you!

[MisRob]

Closed by https://github.com/learningequality/kolibri-design-system/pull/999