0

two columns left colum split to two rows

enter image description here

<div class="parent">
<div class="black"></div>
<div class="red"></div>
<div class="orange"></div>
</div>

what would be the CSS for this? shape I struggle with flex-direction but couldnt figure it out

Ziv Feldman
  • 321
  • 2
  • 13
  • once you have rows and cols to mind about together and not only one or the other, then grid seems the one to use, unless you are about a masonry layout, then masonry script or column CSS. a partially broken layout might also do the job. Can you clarify about heights of black and red ? black always taller or not ? does the layout has to stretch and fill both columns ? etc ... each method will behave different but flex can reproduce this to the pixels .. which is probably not what you need ;) – G-Cyrillus Oct 06 '20 at 17:44
  • I am familiar with the grid my question was to learn and understand flex better, I wont to master it and figure out the edge cases – Ziv Feldman Oct 07 '20 at 12:46
  • flex will require a fixed height to wrap to next column , grid will require the taller element to span a few rows, broken able-layout will expand the cell to the height of the block element but not the other way round. column CSS will balance the content within the amount of columns set. ... each has a purpose :) once you understand them all quiet well, it's easier to choose wich method to use . At least you have an answer about flex in this case. Have fun coding. I had a few examples in an answer below, you can play with them ;) – G-Cyrillus Oct 07 '20 at 12:51

1 Answers1

-1

here is the few option i commented about :

once you have rows and cols to mind about together and not only one or the other, then grid seems the one to use, unless you are about a masonry layout, then masonry script or column CSS. a partially broken layout might also do the job. Can you clarify about heights of black and red ? black always taller or not ? does the layout has to stretch and fill both columns ? etc ... each method will behave different but flex can reproduce this to the pixels .. which is probably not what you need ;)

One or the other can fit your needs, what matter is what you finally expect to happen when real content will be filling those boxes ;)

* {
  margin: 0;
}

body>div {
  margin: 0.25em;
}

.parent {
  vertical-align: top;
  display: inline-grid;
  grid-template-columns: 219px 259px;
  min-height: 304px;
  border: solid white 18px;
}

.orange {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.red {
  grid-column: 1;
  min-height: 84px;
}

.parent.bis {
  display: inline-table;
  width: 478px;
  border-collapse: collapse;
}

.parent.bis .orange {
  display: table-cell;
  width: 259px;
}

.parent.ter {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 304px;
  width: 478px;
}

.parent.ter .orange,
.column2 .orange {
  width: 259px;
  height: 304px;
}

.column2 {
  column-count: 2;
  width: 478px;
  gap: 0;
  column-gap: 0px;
  border: solid white 18px;
}

.orange {
  background: #e09234;
  min-height: 100%;
}

.red {
  background: #df270d;
  grid-column: 1;
  width: 219px;
}

.black {
  background: #030202;
  min-height: 219px;
  width: 220px;
}

body {
  background: #444;
  margin: 0;
  padding: 1em;
}
<div class="parent">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>
<div class="parent bis">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>


<div class="parent ter ">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>


<div class="column2">
  <div class="black"></div>
  <div class="red"></div>
  <div class="orange"></div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129