Create Mosaic style grid using css grid

Question

I am trying create something like this.

As you can see in this image there are 3 columns which are same width. Its has rows which are different height. I have tried this so far code pen

    <div class="wrapper">
  <div><img src="https://source.unsplash.com/random/1200x600" alt=""></div>
  <div><img src="https://source.unsplash.com/random/400x800" alt=""></div>
  <div><img src="https://source.unsplash.com/random/500x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/800x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1000x900" alt=""></div>
  <div><img src="https://source.unsplash.com/random/600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x400" alt=""></div>
  <div><img src="https://source.unsplash.com/random/600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1100x200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x300" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1000x1200" alt=""></div>
</div>

Css:

    .wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;
}
.wrapper div {
  border: 2px solid whitesmoke;
  background: #ccc;
}
.wrapper div img {
  width: 100%;
}

I will be getting different different images of different sizes on every refresh. so i need to make a row of the content height. How can i achieve this using Css Grid? Thank you.

Possible duplicate of [CSS-only masonry layout but with elements ordered horizontally](https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally) — Carle B. Navy, Jul 17 '18 at 19:34
grid creates rows and columns of same size, children can span through columns and/or rows, but it must be set in CSS .... a masonry javascript will be the most efficient way to deal with this and unknown picture size. Else, remains CSS columns, in a draft state for ages and about to totally dessapear . closest css way would have been : https://codepen.io/gc-nomade/pen/xJOrGo but obsolete — G-Cyrillus, Jul 17 '18 at 19:48
@G-Cyr Thank you! this is what i was looking for. Helped me alot. But is there ant drawback of this trick? — Rakesh K, Jul 17 '18 at 20:05
No, only the masonry script to make it solid and reliable everywhere. Some browser will require prefix or will not even care about it. Most of them are still reacting as expexted with few difference. Chrome will not care about column-fill, but FF does ;) — G-Cyrillus, Jul 17 '18 at 20:10
Thank you very much. I see pretty good support for the `column-count` . Please have a look. http://prntscr.com/k7o3f4 — Rakesh K, Jul 17 '18 at 20:12

score 0 · Answer 1 · answered Jul 17 '18 at 20:03

If you want a pure CSS solution you can use column-count: 3 no the container. The only drawback with this one is that it will reorder your grid items vertically.

.container {
  column-count: 3;
}

.box {
  background: pink;
  margin-bottom: 20px;
  height: 100px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

you can use my comment and link ( https://codepen.io/gc-nomade/pen/xJOrGo ) that goes along. .... — G-Cyrillus, Jul 17 '18 at 20:03

Create Mosaic style grid using css grid

1 Answers1