How can I create this layout

Question
1

how-do-i-make-this-layout-v0-rwhvn1pmwhke1

2

Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

3

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Wow, it was this easy. Thank you.

4

Mal said:

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Wow, it was this easy. Thank you.

No problem!

I usually break it down into nested columns and rows, then play around with the flex properties until it looks right. Good luck with the rest!

5

@Micah
Flexbox really changed CSS for good

6

@Micah
How do you ensure that the elements don’t align improperly when resizing? Is there some padding or something?

7

Darwin said:
@Micah
How do you ensure that the elements don’t align improperly when resizing? Is there some padding or something?

There are several ways to address this. I would suggest adding a small margin to the top of columns 2 and 4 or using an empty div to offset those columns.

I’m not sure what would work best off the top of my head. I’d need to experiment a bit

8

Mal said:

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Wow, it was this easy. Thank you.

Are these going to be images or boxes with text? If it’s text, you might want to consider if the order a screen reader reads the content is important to you.

9

@Corwin
I’ve been burned by this before.

“Looks great.”

Added 6 months of additional logic to the page

“Now add accessibility.”

Me: “…oh no”

10

Mal said:

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Wow, it was this easy. Thank you.

You’ll specifically want .row .column:nth-child(2n+2) { align-self: flex-end; }

11

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Consider using nth-child(even) to allow the list to continue dynamically

https://www.geeksforgeeks.org/use-of-even-and-odd-pseudo-classes-with-list-items-in-css/

12

@Beck
I wish I had seen this a year ago lol I ended up using JS for something like this instead… now I’m going to study CSS again lol

13

Niall said:
@Beck
I wish I had seen this a year ago lol I ended up using JS for something like this instead… now I’m going to study CSS again lol

Modern CSS is powerful enough for enterprise-level solutions without libraries.

It’s incredibly powerful. I wish more people understood its potential, the native W3C standards can simplify so much work compared to unnecessary JS. I really like Frontend Masters!

14

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

I was about to suggest Masonry but your solution is elegant and does the trick!

15

Hale said:

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

I was about to suggest Masonry but your solution is elegant and does the trick!

Masonry might be better based on how you want items distributed.

16

Hale said:

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

I was about to suggest Masonry but your solution is elegant and does the trick!

The proposed layout only works well if all items have equal height; otherwise, Masonry is likely a better option.

17

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

100x developer is real

18

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

I was going to suggest a similar approach using padding, but yours is much more responsive, great job

19

@San
I was thinking grid with different spans for odd and even elements.

20

Micah said:
Use a flex row with 4 flex columns. Set columns 2 and 4 to flex-end

Here’s a link for reference: https://codepen.io/MindInSky/pen/NPWNEKx

Just ignore the non-responsive design lol