1

What would be the best way to make the following with flexbox? I would like 2 rows that are equal width columns, however, the last column to be 100% height and fill the rest of the section.

Would it be best to use multiple rows for this?

.row {
  display: flex;
  flex-wrap: wrap-reverse;
}

.col {display:1;width:30%;background:red;}

.col:nth-of-type(3) {background:blue;}
<div class="row">
  <div class="col">
  test
  </div>
  <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
   <div class="col">
  test
  </div>
</div>

enter image description here

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Scott
  • 35
  • 6

1 Answers1

1

Here is a solution using CSS grid layout:

  1. Define the row as grid container using display: grid.
  2. Define the 3-column layout by using grid-template-columns: repeat(3, 1fr)
  3. Define the 2-column layout by using grid-template-rows: repeat(2, 1fr)
  4. Span the third column to all the rows by using grid-row: span 2.
  5. Adjust the gaps between the rows & columns using grid-gap property.

See demo below:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
  grid-gap: 10px; /* gap between the rows & columns */
}
.col {
  background: red;
}
.col:nth-of-type(3) {
  background: blue;
  grid-row: span 2; /* span all the rows */
}
<div class="row">
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
  <div class="col">test</div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    That is exactly what I need. Thank you! – Scott Feb 26 '19 at 09:40
  • Is there a way you can target the first and fourth column to make this 50% width? – Scott Feb 26 '19 at 12:01
  • `grid-template-columns: 50% repeat(2, 1fr)` should do fine I guess (without adjusting for the `grid-gap` of course)... `grid-template-columns: calc(50% - 10px) repeat(2, 1fr)` adjusting for the `grid-gap`... – kukkuz Feb 26 '19 at 12:08
  • Sorry Kukkuz I meant to target the 2nd and 5th. Like this:- http://www.project-progress.co.uk/aa.png – Scott Feb 26 '19 at 12:15
  • you can use `grid-template-columns: 1fr calc(50% - 10px) 1fr` – kukkuz Feb 26 '19 at 12:41
  • 1
    Thats brilliant thank you! I am just trying to workout how to use multiple designs with Flexbox. Thank you – Scott Feb 26 '19 at 13:10