Masonry Layout with CSS Grid

Creating a Masonry Layout using CSS?

Flexbox allows you to do this due to its hability to distribute content and gaps.

Flexbox use is not very easy but not imposible. Here is some help:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{
  background: green;
  width:330px;
  height: 330px;
  display: flex;
  flex-flow: column wrap;
}

.red, .blue{
  margin: 10px;
}
.red{
  flex: 1 1 100px;;
  background-color:red;
}

.blue{
  flex: 2 2 150px;
  background-color:blue;
}

Here is a pen for you:http://codepen.io/vandervals/pen/OVNvaE?editors=110

So, the explanation of what is happening here is as follows:

1. the parent must have display: flex.

2. you have to tell the flow direction, in this case you want columns.

3. for the items, you have to define the flex properties. In this case, you want the red to be smaller, then the proportion would be 1 and the tendency would be to be 100px if it can. The blue has a double "weight" and the tendency is 150px.

CSS masonry isn't working; all flex elements end up in one line

It will not works with flex. You should use grids.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

flex works only for x or y axis.

How to set column width to content width in CSS Grid

If you don't need the rows to align you can try flexbox instead of grid:

ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: none;
  max-width: 9rem;
}

li {
  padding: 0.1em;
  border: 1px solid currentColor;
}

<ul>
  <li>Content 1</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>content 2</li>
</ul>

How to render the item horizontally (Masonry Layout )?

I end up with a package solution and it works perfectly fine!

DaPotatoMan/vue-next-masonry

and this is how it looks like

<masonry
            :cols="{ default: 4, 1024: 3, 768: 2, 640: 1 }"
            :gutter="{ default: 40, 1024: 30, 768: 20 }"
        >
            <div v-for="(post, index) in posts.data" :key="index" class="mb-10">
                <ExploreCard
                    v-for="(post, index) in posts.data"
                    :key="index"
                    :post="post"
                    :canLike="this.canLike"
                />
            </div>
</masonry>

In this way, all the post is rendered in horizontal order !

---

Related Topics