Horizontal Masonry Layout with Flexbox CSS Only

Horizontal masonry layout with flexbox CSS only

Here is one option using wrapped columns, but it requires a fixed height.

.card-container {
  display: flex;
  flex-flow: column wrap;
  height:100vh;
  align-items: center;
  background-color: #888;
}

A better option for CSS masonry layout is to use columns, an example is on this blog post http://w3bits.com/css-masonry/

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Create a Masonry grid with flexbox (or other CSS)

Try the new CSS Grid Layout:

grid-container {  display: grid;                                                /* 1 */  grid-auto-rows: 50px;                                         /* 2 */  grid-gap: 10px;                                               /* 3 */  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */}
[short] {  grid-row: span 1;                                             /* 5 */  background-color: green;}
[tall] {  grid-row: span 2;  background-color: crimson;}
[taller] {  grid-row: span 3;  background-color: blue;}
[tallest] {  grid-row: span 4;  background-color: gray;}

<grid-container>  <grid-item short></grid-item>  <grid-item short></grid-item>  <grid-item tall></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item>  <grid-item taller></grid-item>  <grid-item short></grid-item>  <grid-item tallest></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item>  <grid-item tallest></grid-item>  <grid-item tall></grid-item>  <grid-item taller></grid-item>  <grid-item short></grid-item>  <grid-item short></grid-item>  <grid-item short></grid-item>  <grid-item short></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item>  <grid-item taller></grid-item>  <grid-item short></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item>  <grid-item short></grid-item>  <grid-item tallest></grid-item>  <grid-item taller></grid-item>  <grid-item short></grid-item>  <grid-item tallest></grid-item>  <grid-item tall></grid-item>  <grid-item short></grid-item></grid-container>

Horizontal Masonry Layout with Flexbox CSS Only

Horizontal masonry layout with flexbox CSS only

Create a Masonry grid with flexbox (or other CSS)

Related Topics

Leave a reply