Remove the card columns in favor of a Masonry grid by MartijnCuppens · Pull Request #28922 · twbs/bootstrap (original) (raw)
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
asyncattribute - Check if integrity attribute is present before printing
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 previously approved these changes Jun 18, 2019
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍, and @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.
But also, yes, definitely down to ditch the card columns lol.
Examples might be a better place indeed, I'll change it
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.
@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.
The masonry example is now moved to the examples section.
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):
I'm gonna fix the conflict later but we should remove the copy example because it requires our docs CSS and JS.
mdo approved these changes Jul 18, 2019
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.
xerz-one added a commit to grandDAD2022/sheet-ui that referenced this pull request
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.
IMO you'll have more chance of getting an answer by opening a new Discussion.
I'm migrating from 4 to 5 now, and after some research, I realized that columns: XXrem 2 was enough for my scenario, together with two breakpoint changes in column-count and .card-columns .card { break-inside: avoid }.
Was there a reason for not mentioning the underlying CSS techniques used for the v4 element, or maybe some tutorial that describes them, instead of sending the user into plugins? I understand Masonry solves many more problems, but simpler use cases can be fixed with two CSS lines, more or less :)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
[ Show hidden characters]({{ revealButtonHref }})