Is it possible to use the CSS masonry layouts on Semantic UI cards?

[dragonfire1119]

Are you going to support the column css properties for masonry css card layouts? Example would be http://v4-alpha.getbootstrap.com/components/card/#columns

[jlukic]

I don't understand the question

[dragonfire1119]

Are the "Semantic UI" cards going to be able to look like the Bootstrap card columns? Instead of equal height there should be a option to use the masonry look that's pure css & give a warning to people that IE 9 does not support the properties.

[jlukic]

You can achieve a masonry look by using grid columns and stacking different sized cards.

Most of SUI currently uses flexbox which doesnt support IE9. (This is with 2.0)

[dragonfire1119]

@jlukic I'm using ui cards but they still are using the equal height? Is there a different way with grids to get the cards to use the masonry look?

[t2]

Looking for an answer here too.

[antoineschaller]

Same here, it would be great to add a masonry-like class for cards or grid on semantic

[krishaamer]

I also need this.

@jlukic Could you please give an example of "You can achieve a masonry look by using grid columns and stacking different sized cards" ?

[dragonfire1119]

This is the solution I'm using for css masonry layouts with ui cards.

$mobileBreakpoint            : 320px;
$tabletBreakpoint            : 768px;
$computerBreakpoint          : 992px;
$largeMonitorBreakpoint      : 1200px;
$widescreenMonitorBreakpoint : 1920px;

.card-columns-four {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    @media only screen and (min-width: $mobileBreakpoint) and (max-width: $tabletBreakpoint) {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    @media only screen and (min-width: $tabletBreakpoint) and (max-width: $computerBreakpoint) {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    .ui.card:first-child {
        margin-top: 1px;
    }
    .ui.card {
        display: inline-block;
        margin: 1.0em 0;
        margin-top: 1px;
    }
}

This works with 4 cards across. You would adjust it for less or more cards.

The markup >

<div class="card-columns-four">
     <div class="ui card">
           ....
     </div>
</div>

Hope this helps. Remember multi columns don't work on every browser version http://caniuse.com/#feat=multicolumn

[cdog]

Here it is an example using responsive grids: http://jsfiddle.net/cdog/oj4ew4Le/embedded/result/

It introduces the .masonry modifier which applies to .grid preserving original columns spacing.

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }

  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}

The markup:

<div class="ui container">
  <div class="ui three column doubling stackable masonry grid">
    <div class="column">…</div>
    <div class="column">…</div>
    …
  </div>
</div>

Columns can hold any content not just cards. Using .grid instead of .cards also works with the .relaxed modifier.

<div class="ui three column doubling stackable relaxed masonry grid">…</div>

When using cards inside a masonry grid don't forget to add the .fluid class.

<div class="ui fluid card">…</div>

[krishaamer]

This is precisely what I needed @cdog thank you so much!

[learnerbyheart]

@cdog: Is it also possible to place the columns horizontally? For e.g. if I want to display news and want to show them in chronological order, they have to be placed from left to right instead of top to down and then left to right.

I want: 123 456 789

Current version only gives: 147 258 369

[cdog]

@LucasMoody I don't know how to do it only with CSS. An alternate approach is Masonry if you don't mind a JavaScript solution (see origin options): http://jsfiddle.net/cdog/5n2fgtw9/embedded/result/