How can I create a masonry layout with CSS Grids?

Asked Mar 09 '18 at 16:26

Active Mar 09 '18 at 16:49

Viewed 24 times

I have a "Grids" layout and I would like to align my container such that when the height of one of these grid items get changed, the others move up below the grid items.

CSS:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

it is hard to share the code but you can use

<div class=".grid-container">
   <div class=".grid-item">Hi</div>
   <div class=".grid-item">My</div>
   <div class=".grid-item">Name</div>
   <div class=".grid-item">Is</div>
   <div class=".grid-item">Carlos</div>
   <div class=".grid-item">You rock!</div>
</div>

Example how it is working:

What I want:

edited Mar 09 '18 at 16:49

asked Mar 09 '18 at 16:26

krlosruiz

Have you tried using `grid-auto-flow: column dense;`? – chriskirknielsen Mar 09 '18 at 16:29
1

Please provide a [mcve]; it's hard to help if we don't know how your code really looks. – TylerH Mar 09 '18 at 16:31

How can I create a masonry layout with CSS Grids?

0 Answers0