0

I am trying to achieve a layout where I can change the order of elements from mobile to desktop but also have a masonry effect. Flexbox gets me 90% of the way there, except for 2 nagging conditions:

  1. flex row does not allow for vertical shifting in columns which I need.
  2. flex column requires a height on the container which because of item data variability I cannot control the height.

And I have to make this work for IE11 because our customer base still uses the browser.

img {
    width: 100%;
    height: 100%;
}
.parent {
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;

}
@media only screen and (min-width: 1000px) {
    .parent {
        flex-flow: row wrap;
        justify-content: flex-end;
        max-width: 1500px;
        margin: 0 auto;
    }
    #test1 {
        order: 2;
        word-break: break-all;
        max-width: calc(45% - .5em);
    }
    #test2 {
        order: 1;
      max-width: calc(45% - .5em);
    }
    #test3 {
        order: 4;
      max-width: calc(45% - .5em);
    }
    #test4 {
        order: 3;
      max-width: calc(45% - .5em);
    }
    #test5 {
        order: 5;
      max-width: calc(45% - .5em);
    }
    .styling {
        min-width: calc(45% - .5em);
        margin: 0;
    }
}
.styling {
    border: 1px solid black;
    padding: 1em;
    margin: .5em .5em;
    overflow: hidden;
    width: auto;
}
#test1 {
    text-align: left;

    word-break: normal;
}

#test3 {
    word-break: normal;
}
#test4 {
  word-break: normal;
}
<body>
    <div class="parent">
        <div class="styling" id="test1"><h1>
            Title of Item That Could be Really Long so That it Wraps Around to Multiple Lines
        </h1></div>
        <div class="styling" id="test2"><img src="https://via.placeholder.com/400x400" alt="product image"></div>
        <div class="styling" id="test3"><p>
            Item price
        </p> <p>
            decoration
        </p> <p>
            size
        </p> <p>
            quantity
        </p> <p>
            CTA
        </p></div>
        <div class="styling" id="test4">
            <p>
                Item Description details
            </p>
            <p>
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </p>
        </div>
      <div class="styling" id="test5"><p>Reviews</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      </div>
    </div>
</body>
</html>

I also made a down and dirty codepen to show the basic layout.

The problem I have is that the title takes up as much vertical space as the image on desktop widths when I want the rest of the price and sizes to slide up and fill in the white space. I need the title to be separate from the rest of the item information so that it displays above the image in the mobile version.

With this needing to be as simple as possible for IE11, I cannot do anything too modern. Does anyone have suggestions? Javascript is not my strong suit, so I have avoided it thus far. However, is there any Javascript out there that resizes the height of my second div to make the other elements below slide up. That is all that I am needing to make my day happy again.

Any suggestions to a good read would be most welcome.

Here is what I have researched so far:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ (I am looking into the Order-shifted element in a flexbox layout, but it triggers ActiveX blocks in IE11)

https://jsfiddle.net/q5e20knd/15/ (Grids, no bueno IE11)

https://codepen.io/desandro/pen/osFxj (No external libraries)

https://www.flexboxpatterns.com/mosaic (Height on container)

https://tobiasahlin.com/blog/masonry-with-css/ (This was SOOOO close! darn container height)

Dustin Dade
  • 1
  • 2
  • column css could be an easy option, here is pure CSS codepen demo : https://codepen.io/gc-nomade/pen/zYYBeRY , another one with random heights https://codepen.io/gc-nomade/pen/wvvbvyp . With flex in column direction, a bit of js is required to set an height so it can wrap into columns https://codepen.io/gc-nomade/pen/aboRWRe codepen codes can be copy/paste into jsbin.com to run & test them with IE11. – G-Cyrillus Sep 18 '20 at 19:01
  • 1
    Thank you for the comment, this is how I ended up doing the project. I used flex column for the mobile version and then re-ordered the elements and used javascript to change the height of the parent element and an "invisible" div to add a buffer when the right column needed to be longer. – Dustin Dade Oct 01 '20 at 21:41

0 Answers0