Card Deck+Columns

Is 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>

[SelfhostedPro]

This works:

          <b-container fluid>
            <b-row cols="1" cols-sm="2" cols-md="3" cols-lg="4">
              <b-col
                v-for="app in contents"
                :key="app.id"
                col
                no-gutters
                class="mb-2"
              >
                <b-card
                  :title="app.title"
                  :img-src="app.logo"
                  border-variant="secondary"
                  img-width="100%"
                  align="center"
                  class="h-100"
                >
                  <b-card-text>
                    {{ app.description | truncate(50, "...") }}
                  </b-card-text>
                  <template v-slot:footer v-if="app.categories">
                    {{ app.categories }}
                  </template>
                </b-card>
              </b-col>
            </b-row>
          </b-container>

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)

[stale[bot]]

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!