Css-Only Masonry Layout

How to render the item horizontally (Masonry Layout )?

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


and this is how it looks like

: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">
v-for="(post, index) in posts.data"

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

Remove spaces caused by grid rows by using elements with variable heights

from my comment

You can either span .test-one through 2 rows (see grid-row: xx;) in your favorite grid tutorial) , take a look at masonry grid (here in the search) or even use column CSS if that's fine for you. –
1 min

here an example via grid-row-start/end like you did for column :

#grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;

#test-one {
grid-column-start: 1;
grid-column-end: 2;
background-color: red;
grid-row-start: 1;
height: 100px;
width: 100%;

#test-two {
grid-column-start: 2;
grid-column-end: 3;
background-color: blue;
height: 50px;
width: 100%;

#test-three {
grid-column-start: 2;
grid-column-end: 3;
background-color: green;
height: 50px;
width: 100%;
<div id="grid">
<div id="test-one">Hello Box</div>
<div id="test-two">Hey Box</div>
<div id="test-three">Please no top gap to the "Hey Box"</div>

How to create masonry layout using css only?

You can use flexbox. See codepen for example, and complete guide to flex box to learn more.

In order to keep the layout horizontal, adjust the flex-direction to your liking.

Related Topics

Leave a reply