Remove the card columns in favor of a Masonry grid

[MartijnCuppens]

Mentioned before in #28891 (comment) and #28076 (comment), we should ditch the card columns in favor of masonry.

Main reasons are:

• Cards are ordered per column instead of per row (Cards in columns ordering #17709, card-columns in horizontal order #17805, Ordering across rows in card-columns #17882)
• Several rendering issues (CSS filter not applied correctly on all cards inside card-column in Chrome #19060, Chrome+Safari bug: background-image in non-1st column of multi-column layout isn't displayed #19600, Strange CSS :after effect in card columns #19725, card-columns card over-flow content is not visible #20161, Bootstrap Carousel Sliding outside only in CSS Columns structured #28921)
• No control over responsive number of columns (v4-alpha Card columns on small screens #17511, Introduce card-columns-count as class #22136, Responsive Card Decks #20321, card-columns should be responsive #20905)

I've updated the docs and included Masonry via cdnjs, @XhmikosR is that ok for you, or do you have another proposal? (I also watched the releases of masonry github repo so I know when to upgrade)

Edit:
The demo is a example page now. It's also possible to add additional parameters (async & intergrity) to the extra js.

TODO:

• Link to this PR in migration section
• Move documentation to examples
• Allow to pass async attribute
• Check if integrity attribute is present before printing

Closes #28076, closes #28439

Card docs: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/components/card/#card-columns-masonry-layout
Example page: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/examples/#integrations
Demo: https://deploy-preview-28922--twbs-bootstrap.netlify.com/docs/4.3/examples/masonry/

[ysds]

LGTM 👍, and @mdo?

[mdo]

Thoughts on punting the inclusion of external JS to an example instead of a core component page? We can link to it from the Card docs, but I'd prefer to build something there with Masonry instead of adding it to the core docs.

[mdo]

But also, yes, definitely down to ditch the card columns lol.

[MartijnCuppens]

Examples might be a better place indeed, I'll change it

[inwardmovement]

Maybe we should simply use native css subgrids to prevent having to use a "card-deck" container or a plugin:
Hello Subgrid! – Rachel Andrew at CSSconf EU 2019

Not supported everywhere (anywhere?) but should be since next Bootstrap version I guess.

[MartijnCuppens]

@inwardmovement, we'll probably introduce grid in Bootstrap 6 (the next version(5) will still have IE support), but the masonry layout still differs from (sub)gird.

Dismissing review since we're moving the demo to the example section

[MartijnCuppens]

The masonry example is now moved to the examples section.

[mdo]

Agreed with @XhmikosR about using the existing Examples layout. That's a little tougher for some of the needs here, but this does feel slightly over-engineered right now. We may end up adding third party JS to more examples, but I don't know when that'd be. Until then, these examples should look and feel isolated from our docs.

Here's what I'm leaning towards after taking a crack at this branch (see latest commit):

[XhmikosR]

I'm gonna fix the conflict later but we should remove the copy example because it requires our docs CSS and JS.

[XhmikosR]

This needs some more work and especially the part with the hardcoded script is something that I personally don't like. Maybe we should link to their docs?

Also, I need to rebase and revert the active menu change.

[TinajaLabs]

Somehow I missed all this and used .card-columns. Now wanting to go from 4.6 to 5.3 and yuck, .card-columns is broken. My view is x number of columns wide, starting at the upper left going down each column as many as are needed for more or less evenly distributed column counts.

There's no getting around the efficiency of having all the cards/images stacked in columns when the images are the same width but different heights. No gaps or wasted screen space; only at the bottom.

Does this mean there is no longer a mechanism for columnar lists?

It seems in masonry, the best alternative is horizontalOrder: true and within a few rows down is impossible to follow in any reasonable visual order. If anyone has tips... Thanks.

[julien-deramond]

IMO you'll have more chance of getting an answer by opening a new Discussion.