v4-alpha Card columns on small screens

[James1345]

Using the card columns forces 3 columns to be created regardless of screen size. On smaller screens (e.g. xs, sm) this is not particularly useful. It would be desirable to be able to set different column numbers for different screen sizes easily without manually overriding the column-count property

Syntax example - matching the grid classes. This is merely my own personal proposal
card-columns-sm-1, card-columns-md-3

[hilquias]

+1

[dalezak]

Looks like the following can accomplish this, but it would be nice if it was built into V4.

.card-columns {
  @include media-breakpoint-up(xs) {
    &.card-columns-xs-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-xs-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-xs-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-xs-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(sm) {
    &.card-columns-sm-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-sm-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-sm-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-sm-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(md) {
    &.card-columns-md-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-md-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-md-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-md-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  @include media-breakpoint-up(lg) {
    &.card-columns-lg-1 {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1;
    }
    &.card-columns-lg-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    &.card-columns-lg-3 {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
    &.card-columns-lg-4 {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
}

[fabioroldan]

It works perfect !!! I already added in _card.scss and compile with Grunt. Thank you very much "@dalezak".

[gczh]

👍 This should go up in the v4 docs!

[nextgenthemes]

@dalezak There is no need for vendor prefixes, autoprefixer takes care of that.

[rjmoggach]

I'm using something like the following - some redundant code given autoprefixer will take care of prefixes but nonetheless current release wasn't working for me on chrome so I've left them in

@mixin card-columns($column-count, $column-gap) {
    -webkit-column-count: $column-count;
       -moz-column-count: $column-count;
         -o-column-count: $column-count;
        -ms-column-count: $column-count;
            column-count: $column-count;
    -webkit-column-gap: $column-gap;
       -moz-column-gap: $column-gap;
         -o-column-gap: $column-gap;
        -ms-column-gap: $column-gap;
            column-gap: $column-gap;
}

.card-columns {
    @include media-breakpoint-only(xs) {
        @include card-columns(1, 1.25rem);
    }
    @include media-breakpoint-only(sm) {
        @include card-columns(1, 1.25rem);
    }
    @include media-breakpoint-only(md) {
        @include card-columns(2, 1.25rem);
    }
    @include media-breakpoint-only(lg) {
        @include card-columns(4, 1.25rem);
    }
    @include media-breakpoint-only(xl) {
        @include card-columns(5, 1.25rem);
    }
    .card {
      display: inline-block;
      width: 100%; // Don't let them exceed the column width
    }
}

[mdo]

No plans to implement this wholesale, but I can see adding a mention to the docs for how it can be customized and extended. Coming in #19885.