Card Deck+Columns
See original GitHub issueIs your feature request related to a problem? Please describe…
I have a page with dynamic elements (anywhere from 1-200 cards) and would like to lay them out in an even grid. Currently if I use columns I’m able to display all of them. If I use deck I’m unable to as they become crunched and unreadable. Here is an example:
Columns:
Deck:
Describe the solution you’d like
If you take a look at how semantic accomplishes this you can see they allow you to specify the number of columns and then they’ll use that for creating a nice grid of everything: https://semantic-ui.com/views/card.html
Describe alternatives you’ve considered
I’ve considered using a grid container or dividing my apps into groups of 3 in order to get deck to working well but haven’t come up with a good way yet. I’m open to suggestions though.
Additional context
Add any other context or screenshots about the feature request here.
Here is what code I’m currently using to render the cards:
<b-card-group deck v-if="contents">
<b-card
v-for="app in contents"
:key="app.id"
:title="app.title"
header-bg-variant="white"
:img-src="app.logo"
border-variant="secondary"
style="max-width: 20rem;"
>
<b-card-text>
{{ app.description | truncate(120, '...') }}
</b-card-text>
<template v-slot:footer v-if="app.categories">
{{ app.categories }}
</template>
</b-card>
</b-card-group>
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
This works:
I still think it would be nice to provide an easier way of doing this that’s more responsive (mine can be a bit clunky on different sized screens)
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!