Challenging layout - how to achieve?

Question

I'm trying to create the attached layout, but am having difficulties.

It's based on this layout:

The main thing with the example is that all of their images are created to the exact specs to make the grid alternate in size.

I'd like to be able to:
• Use any image size and have it be cropped to the containing box with the overflow hidden
• Have the width/height of the containing box and image scale proportionally as you shrink the browser.
• Not rely on any plugins if possible.

What I have tried so far is:

• Flexbox
• Floats
• Max/min heights with negative top margin
• Using padding and absolute positioning as in this example

Any thoughts on how to achieve this in the cleanest way possible?

http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Feb 17 '16 at 19:08
How about css grid? https://www.w3.org/TR/2015/WD-css-grid-1-20150917/ — ne1410s, Feb 17 '16 at 19:09
why cant you use flexbox? That is the one that jumps out to me for what you want. Post your code that you have tried so far with flexbox as well as what is not working. a [jsFiddle](https://jsfiddle.net) would be nice — thedarklord47, Feb 17 '16 at 23:04
I'm going through some older answers of mine, and found this. How doesn't my answer solve your question? — Asons, Feb 19 '18 at 19:46

Asons · Accepted Answer · 2016-02-18T02:23:38.230

Here is a start for you. Now you can fill each item with images, adding text etc.

html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  min-height: 500px;
}

.container .item {
  height: calc(16.6% - 20px);
  background: #eee;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.container .item:nth-child(12),
.container .item:nth-child(10),
.container .item:nth-child(7),
.container .item:nth-child(5),
.container .item:nth-child(4),
.container .item:nth-child(2) {
  height: calc(33.3% - 20px);
}

.container .item .img {
  flex: 1;
}

.container .item .txt {
  flex: 0;
  background: #fff;
  color: #900;
}

<div class="container">
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
</div>

Challenging layout - how to achieve?

1 Answers1

Linked