Masonry type layout issue

Asked Aug 01 '18 at 10:25

Active Aug 01 '18 at 11:09

Viewed 45 times

.masonry {
    column-count: 1;
    column-gap: 20px;
    max-width: 900px;
    margin: 20px auto;
}

@media only screen and (min-width: 600px) {
  .masonry {
    column-count: 2;
  }
}

.item { 
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
  color: #fff;
  font-size: 40px;
}

.item--type1 {
  width: 100%;
  height: 200px;
  background: red;
}
.item--type2 {
  width: 100%;
  height: 400px;
  background: blue;
}
.item--type3 {
  width: calc(50% - 40px);
  height: 600px;
  background: green;
  margin-right: 20px;
}

<div class="masonry">
  <div class="item item--type1">1</div>
  <div class="item item--type2">4</div>
  <div class="item item--type3">2</div>
  <div class="item item--type3">3</div>
</div>

I m just trying to build layout like below image. I tried to with column count :2 can not achieve correct order. Any new solution for this kind of layout?

PS: CSS grid is not working with IE properly.

edited Aug 01 '18 at 11:09

asked Aug 01 '18 at 10:25

Tharaka Nilupul Dharmabandu

Please paste your code with the question, only then we can help you! – Jithin Raj P R Aug 01 '18 at 10:26
First share your code what you tried? – Rohit Verma Aug 01 '18 at 10:27
show what you have tried. – Sakkeer A Aug 01 '18 at 10:28
OK. I ll share my code with you – Tharaka Nilupul Dharmabandu Aug 01 '18 at 10:35
1

Not possible **without** CSS Grid and probably not dynamic even then. - https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally – Paulie_D Aug 01 '18 at 12:13
Thank you for the info. Any link how to do it in CSS Grid? – Tharaka Nilupul Dharmabandu Aug 01 '18 at 12:41

Masonry type layout issue

0 Answers0