Trying to achieve a multi-column layout with one column split into rows with Flexbox

Question

I would like to ask some help how I can achieve this with flexbox.

 Desktop View
|----------------------------------------------------------------------|
|                                       |                              |
|                   1                   |                              |
|                                       |               2              |
|---------------------------------------|                              |
|                                       |                              |
|                   3                   |                              |
|                                       |                              |
|----------------------------------------------------------------------|

Mobile View
|---------------------------------------|
|                                       |
|                   1                   |
|                                       |
|---------------------------------------|
|                                       |
|                   2                   |
|                                       |
|---------------------------------------|
|                                       |
|                   3                   |
|                                       |
|---------------------------------------|

My attempt is this so far.

.header-container {
  display: flex;
  flex-wrap: wrap;
}

.header-title-container {
  border: 1px solid pink;
  width: 70%;
}

.header-media-container {
  border: 1px solid lavender;
  width: 30%
}

.header-summary-container {
  border: 1px solid purple;
  width: 70%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>

score 2 · Accepted Answer · answered Apr 29 '20 at 17:04

grid can help you here if you cannot set an height on the row.

You may create a custom class inside a mediaquery since bs4 do not support display:grid yet.

possible example to test :

/* update with custom class */
@media screen and (min-width: 768px) {
  .d-lg-grid {
    display: grid;
    grid-template-columns: 70% 1fr;
  }
  .header-media-container {
    grid-column: 2;
    grid-row: 1/3;
  }
}

/* your test css */
.header-title-container {
  border: 1px solid pink;
}

.header-media-container {
  border: 1px solid lavender;
}

.header-summary-container {
  border: 1px solid purple;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container  d-lg-grid">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>

hi sorry for the late reply, this one really did it for me! Thank you very much, stay safe! — FNads, Apr 29 '20 at 23:45

ggorlen · Answer 2 · 2020-04-30T02:25:24.047

1

To do this, you can use a grid with

grid-column: 2;
grid-row: 1 / 3;

properties applied to your right/center element, starting it at the second column and spanning the first and second rows. For your small width, the standard display: block enforces the typical column layout.

Here's a minimal example:

#outer div {
  padding: 1em;
}

#left-upper {
  background: red;
}

#left-lower {
  background: blue;
}

#right {
  background: green;
}

#outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
}

#right {
  grid-column: 2;
  grid-row: 1 / 3;
}

@media (max-width: 300px) {
  #outer {
    display: block;
  }
}

<div id="outer">
  <div id="left-upper" class="content">
    Red
  </div>
  <div id="right" class="content">
    Green
  </div>
  <div id="left-lower" class="content">
    Blue
  </div>
</div>

edited Apr 30 '20 at 02:25

answered Apr 29 '20 at 16:03

ggorlen

44,755
7
76
106

ah thank you very much! I'm kind of imagine your point but let me go ahead and try this. – FNads Apr 29 '20 at 16:05
hi, I tried your solution and it really does solve it. This is my fault I'm really sorry, I should've added the mobile version of it. That's the reason why I was doing it with that layout, so that when it comes to mobile breakpoints, I could just order them to which position. I've updated my original post and included the layout for the mobile. – FNads Apr 29 '20 at 16:16

tony · Answer 3 · 2020-04-29T17:12:45.857

You could also use grid

<div class="grid">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>



.grid {
  display: grid;
  height: 100px;
  grid-template-columns: 1fr 1fr;
}

.item1 {
  border: 2px solid red;
  background-color: black;
  grid-row: 1 / 2;
}

.item2 {
  border: 2px solid red;
  background-color: yellow;
  grid-row: 2 / 2;
}

.item3 {
  border: 2px solid red;
  background-color: blue;
  grid-row: 1 / 3;
}

@media screen and (max-width: 768px) {
  .item3 {
    grid-row: 3 / 3;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

Trying to achieve a multi-column layout with one column split into rows with Flexbox

3 Answers3