Flexbox: 2 column 2 row repeating list

[GOLGO_13]

Hello,
I’m just learning flexbox and trying to create a list that looks like the attached image:

I’ve been able to figure out how to get list items 1-3, but I’m stuck on getting 4-6 to line up below 1-3.

HTML

<div class="gallery">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li> 
</ul>
</div>

CSS

* {
  box-sizing: border-box;
}

ul {
  height: 100vh;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  width: 50%;
}

li:nth-child(1) {
  background: #BB3047;
  flex: 0 0 100%;

}

li:nth-child(2) {
  background: #000;
  flex: 0 0 50%;
}

li:nth-child(3) {
  background: #30BB75;
  flex: 0 0 50%;
}

I’d like to get the margins/gutter spacing between the list items too, but the repeating structure is where I’m currently stuck!

Any suggestions?

Thanks!

[SamA74]

I think to do this with flex, you will need to use the order property to make every 3rd element starting with 1 be first in order, which will give you the big squares all in the first column, with the smaller squares following in the second column.
I would have a go at throwing a Pen together, but I’m out of time tonight.

[SamA74]

OK, not perfect, as it’s a rush job. But it will get you started with the basic principle:-

[GOLGO_13]

DOPE!
Gonna start playing with this immediately!

Thanks again Sam!

[ralphm]

That’s nice work by Sam, but just be aware that this is a perfect scenario for display: grid. One of the tricks with using flexbox is knowing when it’s not the best tool.

[SamA74]

@ralphm

That’s nice work by Sam, but just be aware that this is a perfect scenario for display: grid.

Was going to mention that, but it slipped my mind as I wanted to try the flex challenge.

[GOLGO_13]

Agreed!
I’ve already created this as a CSS Grid, but I’m hopeful to use Sam’s flexbox code as the start of a fallback for current IE, Edge and Safari browsers. Looks like CSS Grid is supported by Safari, but on my Windows 10 machine it breaks in Safari…

[ralphm]

@GOLGO_13

on my Windows 10 machine it breaks in Safari…

And so it should! Safari hasn’t been updated for Windows in many years, and is not a player in the Windows browser market any more.

Grid was released this year for most browsers, so it has pretty good support, but not universal. I think flexbox is a little better supported at this stage. The nice thing about both, though, is that you can arrange simple fallbacks for the browsers without support yet — which would satisfy everyone (web dev and clients) if this were a sane world.

[whisher]

Just to play around (I’m starting learning grid layout )
the same thing with grid layout
You can set the height in the wrapper