CODEWITHSUNDEEP
cssgridhtml-tableflexbox
Chase
Chase

Reputation: 2306

Flexbox with rowspan and fixed aspect ratio

I’m hoping this can be done with flexbox and not require (too much) trickery.

What I’m looking for:

1) One large block, with two smaller ones next to it that rowspan, without having to have their own nested wrap. Working Example

2) Percentage width that resizes at a fixed aspect ratio, probably using the padding-top/bottom trick. This can either be defined on just the large block, the smaller ones, or both. I say either/or/and because I don’t really care so much that the smaller block match the aspect ratio of the larger one. Perhaps the aspect ratio could only be applied to the larger block, and the smaller ones would flex to the height. That would be fine, as long as they all resize together, relative to the width of the container. Working Example

That last bit is where I’m hitting the major road block. The first example with a rowspan looks great, but relies on the wrap having a defined height, which breaks the responsiveness. When I try controlling the height of the blocks rather than the wrapper, things start breaking down.

Here’s my non-working work in progress (or below)

Thanks!

<div class="gallery">
   <div class="gallery-group">
       <div class="a"></div>
       <div class="b"></div>
       <div class="c"></div>
   </div>
</div>

.gallery {
   position: relative;
   height: auto;
   margin: 0 12%;
   background-color: transparent;
   display: flex;
}

.gallery-group {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;

   width: 100%;
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0;
   align-items: stretch;
   flex-wrap: nowrap;
}

.a, .b {
  flex: 0 0 50%;
  align-self: flex-start;
  width:30%;
  padding-top:22%;
}

.c {
  flex: 0 0 100%;
  align-self: flex-end;
  width:70%;
  padding-top:50%;
}

Upvotes: 0

Views: 1532

Answers (1)

zer00ne
zer00ne

Reputation: 43880

I think I got it, I re-sized it in and out of CodePen.io. The left column always maintained 35% width and 50% of height on the green and red flex-items. The right column maintained the 65% width and 100% height as well. Take a look here:

CODEPEN

CSS

.gallery {
   position: fixed;
   background-color: transparent;
   display: flex;
   width: 100vw;
   height: 100vh;
   flex-flow: column wrap;

}

.gallery-group {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-self: stretch;
   width: 100%;
   height: 100%;
   position: relative;
}


.a, .b {
   flex: 1 1 1%;
   width: 35%;
   height: 50%;
   position: absolute;
   left: 0px;
}

.a { top: 0px }
.b { bottom: 0px }

.c {
   flex: 1 1 1%;
   align-self: stretch;
   width: 65%;
   padding-top: 35%;
   position: absolute;
   top: 0px;
   bottom: 0;
   right: 0px;
}

.a { background: red; }
.b { background: green; }
.c { background: blue; }

Upvotes: 1

Related Questions