5
\$\begingroup\$

I wanted everything to just snap into place, but found I had to add spacing to some of the items in order to line them up. It's still neater than trying to float things, and Grid isn't ready yet. But any advice/feedback will be appreciated.

div {padding:0px;margin:0;}
.container {
  display:flex;
  width:1070px;
  min-height:500px;
  margin:0 auto;
  flex-flow:row wrap;
  justify-content:space-between;
  align-content:space-between;
  align-items:flex-start;
  box-sizing:border-box;
}
.item > .item:first-child {padding-bottom:5px;}
.full-width {padding:5px 0;}
<div class="container">
  <div class="full-width item">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
  </div>
  <div class="full-height pink item">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8x/C/HgAFvwJOOdDPcgAAAABJRU5ErkJggg==" width="530" height="610" alt="" />
  </div>
  <div class="full-height yellow item">
    <div class="half-height yellow item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/p+hHgAHYgJ3jYoEPgAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
    <div class="half-height green item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU+s9QDwADzgGSD7t9RQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
  </div>
  <div class="full-width item">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
  </div>
  <div class="full-height item">
    <div class="half-height yellow item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/p+hHgAHYgJ3jYoEPgAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
    <div class="half-height green item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU+s9QDwADzgGSD7t9RQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
  </div>
  <div class="full-height pink item">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8x/C/HgAFvwJOOdDPcgAAAABJRU5ErkJggg==" width="530" height="610" alt="" />
  </div>
  <div class="full-width purple item">
    <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
  </div>
  <div class="full-height item">
    <div class="half-height red item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8aGc3EQAFVQHwUBy2eQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
    <div class="half-height blue item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="530" height="530" alt="" />
    </div>
  </div>
  <div class="full-height item">
    <div class="half-height blue item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="530" height="530" alt="" />
    </div>
    <div class="half-height red item">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8aGc3EQAFVQHwUBy2eQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
    </div>
  </div>
</div>

https://codepen.io/wagonlips/pen/zZzLqG

\$\endgroup\$
1
\$\begingroup\$

Use a different selector: div.subcontainer

Flexbox can work in either column or row. Because the code has a column and row you need to add another div (div.sub-container) with flexbox and change the height to the height of div.sub-container.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.