recreate this layout challenge
Could someone tell me where I went wrong when trying to recreate this layout ?
Here is my solution: https://codepen.io/mikewill245/pen/JjwvEgM
28 Replies
should've used grid
You can easily make the same layout with flexbox too
I wouldn't say easily lul
you'll need extra elements as well
like you'd need to wrap the top 2 cards in a separate wrapper and then wrap that wrapper and the bottom card in another wrapper xD
Not at all actually
hmmm
Just give the container a flex wrap and the last item a flex basis of 100%
hmmmmmm...
i think that can work as well
the concept of flex wrap didn't even cross my mind😂
@snxxwyy Yo i think it worked !! Thank you !!
No worries!
@snxxwyy i tried recreate again and now I’m stuck again could you help lol https://codepen.io/mikewill245/pen/JjwvEgM
What exactly is the issue you’re having?
I’m trying to get the first two card next to each other https://codepen.io/mikewill245/pen/JjwvEgM
I’m on phone rn so I can’t really take a good look at it, but try this, I’ll give you some code to try out
Could it not be displaying the way I want cause I’m on the phone ? Cause I’m currently editing on my phone and not doing It on my laptop right now lol
No it should display but just really squish everything
Hmm ok , currently the first two card are stacking on another
I think I kind of did it
Grid is optimal for both the layout and the card because we're working with columns for the container and then inside the cards you want to shift the bottom card's text right
I completed this challenge using both grid https://codepen.io/z-/pen/ExGEwBK
And flexbox https://codepen.io/z-/pen/NWeYwKe/9f7da01590ee81027abb4d05c515a68c based on the grid layout, it uses the same HTML layout just so it's obvious what would need to be different
Note that my card elements are reversed so that in the HTML I can have the h3 under the related h2. I'm also using flex-wrap on the card elements rather than splitting up the header and content.
There isn't really a good reason to use flex for either when you're dealing with more than 1 axis. If you've got a nav bar then sure use flex, but in this example it requires far more work for flex than grid
Totally agree that as soon as you work with more than one axis, grid is your friend
@Kirin-808 yea im going to have to use grid cause I’m still having a hard time getting the first two card side by side and being even
I completed this challenge and actually used responsive flex-box. Feel free to give it a once-over. 🙂
https://codepen.io/KirativeWD/pen/gOZevRR?editors=1100
@PugCurl wow that came out nice !
I actually prefer flex (like a heathen 😂 ), so I didn't even think of using grid. 😬
So @PugCurl I kind of got close to it https://codepen.io/mikewill245/pen/JjwvEgM
I have found it interesting that so many people using flex within the cards only use them for the header. When I did my flex version I used wrap within the card, which allowed me to use basically the same HTML as the grid version. I'm curious, you used wrap for the container, why not for the card? It makes the HTML a little simpler
The chaotic energy.
However, when I see two elements side-by-side, my go-to is flex—kinda like a reflex. (I'll walk myself out) Using flex on the cards themselves didn't even come to mind because margin can create the horizontal gap.