0

I need some help from the CSS Gurus here. I am trying to get a layout to work for me whereby the widths are specific but the heights are determined by the contents of the div. The divs wrap as required but in the case of the 2 smaller divs in the case that they should fit one on top of the other next to the larger one but I cannot figure out how to do this or if I am even using the correct layout for this.

<div style="display: flex; flex-wrap:wrap;">
            <div style="height:300px;width:66%; background-color: red;"></div>
            <div style="height:150px;width:33%; background-color: blue;"></div>
            <div style="height:150px;width:33%; background-color: yellow;"></div>
</div>
user3859651
  • 101
  • 1
  • 2
  • 12
  • 1
    Not possible afaik. You'll have to use javascript to build the grid. THis is how pinterest originally did it. You *might* be able to use css-grid but I don't know – chovy Jun 27 '22 at 12:45
  • Thanks, an example of achieving this with grid would be great using the same heights and widths... – user3859651 Jun 27 '22 at 12:55
  • I'm not clear what you're trying to accomplish. Do you want to preserve the varying heights and stack them all so there is no space? If so try this: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ – chovy Jun 27 '22 at 12:59
  • @chovy yes if the varing height fits within the the column it should stack as much – user3859651 Jun 27 '22 at 13:22
  • yeah you can't do it with css alone. You'll need to build an array of elements one for each column. That's how pinterest did it back in the day. – chovy Jun 27 '22 at 14:21
  • @chovy do you have any examples of this please? – user3859651 Jun 27 '22 at 14:31
  • https://javascript.plainenglish.io/build-a-pinterest-layout-using-html-css-a30ab59ce137 – chovy Jun 27 '22 at 17:13
  • http://raphamorim.io/waterfall.js/ – chovy Jun 27 '22 at 17:14

0 Answers0