0

I'm trying to define a 4-column grid layout using CSS flex where the default flex child is a quarter of the parent width and an equal division of the parent height, and then I'd like to define two classes (.dw and .dh), which doubles the child's width and/or height, when applied. In case is helps, for my setup, a child will only be one of the following class combinations: .child, .child.dw, .child.dw.dh. It will never have the .dh class without also having the .dw property, but it can have the .dw class without the .dh class.

My problem is that I can't figure out how to reliably do both at the same time. My code that doubles height is also a bit finicky.

Here's my markup:

<div id="parent" class="sec">
  <div class="child dh dw"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- etc. -->
</div>

Here's the first piece of CSS I discovered that allows a .dwclass:

#parent {
  padding: 50px;
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
}

#parent .child {
  flex: 1 0 calc(25% - 10px);
  box-sizing: border-box;
  margin: 5px;
}

#parent .child.dw { flex: 1 0 calc(50% - 10px); }

The above comes out looking like the following, which is exactly what I'm looking for in a .dw child.

enter image description here

And here's the piece of CSS I discovered in which a .dh class almost works.

#parent {
  padding: 50px;
  background-color: pink;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#parent .child {
  flex: 0 0 25%;
  margin: 5px;
  box-sizing: border-box;
}

#parent .child.dh { flex-basis: 50%; }

But as you can see from the next screenshot, it doesn't properly set the .dh child's height properly, and it doesn't use up all the vertical space of the parent container.

enter image description here

For reference, here's what I'm trying to achieve with a child that has both .dw and .dh. Please ignore the fact that it now has two less children - I simply used paint.net to stretch the first screenshot's .dw child to cover the two children below it.

enter image description here

SeriousLee
  • 1,301
  • 4
  • 20
  • 42
  • spanning both rows and column requires to use the grid layout, flex can only one or the other .That's one of the main difference ;) – G-Cyrillus May 02 '20 at 11:00
  • @temaniafif , i think the duplicate you pickup do not cover the question , it is about spanning both rows and columns together, flex cannot and the duplicate doesn't either ;) – G-Cyrillus May 02 '20 at 11:12
  • @G-Cyrillus I was adding two duplicate, I started with the easiest one to find – Temani Afif May 02 '20 at 11:13
  • @TemaniAfif okay, however the only way i see is grid ;) https://codepen.io/gc-nomade/pen/QWjqRLz there won't be any flex duplicate without rethink the html structure ;) or a javascript aside – G-Cyrillus May 02 '20 at 11:14

0 Answers0