Flexbox: 2 column 2 row repeating list

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!

:grinning:

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. :disappointed:

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

https://codepen.io/SamA74/pen/KXQXqQ

2 Likes

DOPE!
Gonna start playing with this immediately!

Thanks again Sam!

:sunglasses: :sunglasses: :sunglasses:

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. :stuck_out_tongue:

1 Like

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

1 Like

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…

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. :stuck_out_tongue:

4 Likes

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

https://codepen.io/whisher/pen/gGjLXE

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.