CODEWITHSUNDEEP
htmlcssgridmasonry
Greg
Greg

Reputation: 1402

Metro grid style

I'm trying to achieve something like the following page: https://undsgn.com/uncode/homepages/blog-metro/

I have tried and was able to come as close as this: https://jsfiddle.net/futu7t1c/

But how can I get those 2 small-thumbs at the bottom to move up?

The order is big, small, small, big, small, small

<div id="blog-posts">
<div class="grid big-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid big-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
<div class="grid small-thumb">
  Title
</div>
</div>

css

#blog-posts {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
      -moz-column-gap: 0em;
      -webkit-column-gap: 0em;
      column-gap: 0em;
    }

    .grid {
      background: #eee;
      float: left;
      position: relative;
      color: #fff;
    }

    .big-thumb {
      width: 50%;
      height: 600px;
      background: #aeaeae;
    }

    .small-thumb {
      width: 25%;
      height: 300px;
      background: #353535;
    }

Upvotes: 1

Views: 1569

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

To replicate that grid, you can make flex rows that have flex children that are also flex columns holding your images.

.flex {
  display: flex;
}
.col {
  flex-direction: column;
  flex: 0 0 50%;
}
img {
  max-width: 100%;
  vertical-align: top;
}
<div class="flex row">
  <div class="flex col">
    <div class="big">
      <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
    </div>
    <div class="flex row">
      <div class="small">
        <img src="https://i.sstatic.net/2C22p.jpg">
      </div>
      <div class="small">
        <img src="https://i.sstatic.net/2C22p.jpg">
      </div>
    </div>

  </div>
  <div class="flex col">
    <div class="flex row">
      <div class="small">
        <img src="https://i.sstatic.net/2C22p.jpg">
      </div>
      <div class="small">
        <img src="https://i.sstatic.net/2C22p.jpg">
      </div>
    </div>
    <div class="big">
      <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
    </div>
  </div>

Well, that's how you'd do it using regular ol' html/css. But since you want to just have a bunch of elements that automatagically lay out like that, use masonry

$('.masonry').masonry({
  itemSelector: '.item',
  columnWidth: '.small'
});
body {
  margin: 0;
}
.item {
  float: left;
}
.big {
  width: 50%;
}
.small {
  width: 25%;
}
img {
  width: 100%;
  vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
  <div class="item big">
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
  </div>
  <div class="item small">
    <img src="https://i.sstatic.net/2C22p.jpg">
  </div>
  <div class="item small">
    <img src="https://i.sstatic.net/2C22p.jpg">
  </div>

  <div class="item big">
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
  </div>
  <div class="item small">
    <img src="https://i.sstatic.net/2C22p.jpg">
  </div>
  <div class="item small">
    <img src="https://i.sstatic.net/2C22p.jpg">
  </div>
</div>

Upvotes: 1

Related Questions