How to create multiple columns and row with Flexbox

Question

Given I have the following markup:

<ul class="box">
  <li class="list-item A">
    <a>A</a>
  </li>
  <li class="list-item B">
    <a>B</a>
  </li>
  <li class="list-item C">
    <a>C</a>
  </li>
   <li class="list-item D">
    <a>D</a>
  </li>
</ul>

How would I get the following layout with Flexbox?

I have created a pen with what I've tried but it's not working:

https://codepen.io/pbul2004/pen/LYEROLq

A = An image at 25%
B = A heading and subheading at 50%
C = A description at 50%
D = Pirce and a button at 25%

B and C are in the middle on top of each other.

G-Cyrillus · Accepted Answer · 2019-12-14T17:37:37.480

you need a set height to wrap flex element into columns:

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.box {
  display: flex;
  height: 100vh;
  flex-flow: column wrap;
}

.list-item {
  flex: 1;
  border: red solid;
 /* width: 33.33%;*/
}

.A,
.D {
  min-height: 100%;
}
.A {width:20%;}
.D{width:15%;}
.B,.C {width:65%}

<ul class="box">
  <li class="list-item A">
    <a>A</a>
  </li>
  <li class="list-item B">
    <a>B</a>
  </li>
  <li class="list-item C">
    <a>C</a>
  </li>
  <li class="list-item D">
    <a>D</a>
  </li>
</ul>

If you cannot set an height, then grid will do the job for you.

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.box {
  display: grid;
  grid-template-columns: 20% 1fr 15%;
  flex-flow: column wrap;
  
  /* for demo */
  min-height: 50vh;
  transition:0.2s;
  /* for demo, use content instead */
}
.box:hover {min-height:100vh;}

.list-item {
  border: red solid;
}

.A,
.D {
  grid-row: 1 / span 2;
}

.A {
  grid-column: 1;
}

.B {
  grid-row: 1;
  grid-column: 2;
}

.C {
  grid-column: 2;
  grid-row: 2
}

.D {
  grid-column: 3:
}

<ul class="box">
  <li class="list-item A">
    <a>A</a>
  </li>
  <li class="list-item B">
    <a>B</a>
  </li>
  <li class="list-item C">
    <a>C</a>
  </li>
  <li class="list-item D">
    <a>D</a>
  </li>
</ul>

as tutorials or reminder : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ & https://css-tricks.com/snippets/css/complete-guide-grid/

Thanks, made it look so easy. How would I easily adjust the column widths, A = 20% and D say 15%, then B and C the remaining??? — John, Dec 14 '19 at 17:34
@John i updated the snippets. You can also read the links, you will find all information about that and how i did it ;) Column CSS : https://codepen.io/gc-nomade/pen/PowGOgb will make each column of the same size ... best option is the grid display here i think. — G-Cyrillus, Dec 14 '19 at 17:38
Apparently we're 'not allowed' to use css grid yet. But i'll take a look at the flexbox option, thanks again for your help :-) — John, Dec 14 '19 at 17:43

How to create multiple columns and row with Flexbox

1 Answers1