2

I've a flow on a page with several divs (I'm using flex position, using the row direction) the structure is pretty "fixed" with set heights.. Everything flows as it should, but I was wondering if someone knows a way to fill up the empty gap (of course this isn't the row direction for that part so that's probably why it doesn't work)

https://jsfiddle.net/benvanlooy/2z8b5tzw/6/

I want 6 to be placed under 5... (see fiddle below)

  • I don't think it's possible using purely css.. but that's what I really would like.
  • I don't want to use javascript to fix this (I know such things are possible with Isotype and such)

any help would be much appreciated

html 

  <div class="post-wrapper">
    <div class="post">1</div>
  </div>

  <div class="post-wrapper">
    <div class="post">2</div>
  </div>

  <div class="post-wrapper fourth">
    <div class="post">3</div>
  </div>

  <div class="post-wrapper fourth">
    <div class="post">4</div>
  </div>

  <div class="post-wrapper">
    <div class="post">5</div>
  </div>

   <div class="post-wrapper">
    <div class="post">6</div>
  </div>

  <div class="post-wrapper">
    <div class="post">7</div>
  </div>

</div>

css

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .post-wrapper{
  padding: 10px;
  width: 50%;
  height: 200px;
  box-sizing: border-box;
}

.container .post-wrapper.fourth{
  width: 25%;
  height: 410px;
}

.container .post-wrapper .post{
  background-color: #cccccc;
  width: 100%;
  height: 100%;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Ben Van Looy
  • 45
  • 1
  • 5
  • 1
    the short answer is "you cannot" ... but you may use hack and workaround to do it or JS, but a pure clean and genric CSS way, no – Temani Afif Apr 05 '18 at 20:55
  • thanks for confirming my suspicion Termani! I feared it wouldn't be possible, it's just something I come across very often with designers I work with... it's so easy to create photoshop (grid) layouts but to actually get certain grids into place - not always that easy! I'm actually very curious by the "grid" answer someone gave – Ben Van Looy Apr 05 '18 at 22:30

1 Answers1

0

Unless you have restrictions on how the HTML is created, you could wrap div .post 5 and 6 together. That way, you can apply a flex-direction: column on the wrapper to place the divs 5 and 6 one above the other.

.container .post-wrapper.col-dir{
  height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .post.inner {
  height: 185px;
}
<div class="container">

      <div class="post-wrapper">
        <div class="post">1</div>
      </div>

      <div class="post-wrapper">
        <div class="post">2</div>
      </div>

      <div class="post-wrapper fourth">
        <div class="post">3</div>
      </div>

      <div class="post-wrapper fourth">
        <div class="post">4</div>
      </div>

      <div class="post-wrapper col-dir">
        <div class="post inner">5</div>
        <div class="post inner">6</div>
      </div>

      <div class="post-wrapper">
        <div class="post">7</div>
      </div>

      <div class="post-wrapper">
        <div class="post">8</div>
      </div>

</div>

Here is a working jsfiddle: https://jsfiddle.net/valangar/z6whLjty/

valangar
  • 151
  • 1
  • 7
  • he said **the structure is pretty "fixed" with set heights** .. by the why changing the HTML strcuture will make it obvious and trivial – Temani Afif Apr 05 '18 at 22:16
  • thanks for the effort, but I was actually searching a way to have an easy flow to the page and wanted to find out if there is a way to do this – Ben Van Looy Apr 05 '18 at 22:27