 Hi there, my friend and friends. I recently issued a challenge to people that were on my Discord to create this layout that we can see right here, because I wanted to see how people would approach something like this, especially with this bottom one having a little bit of a different layout within the grid here. And I got a lot of different answers and actually got lots and lots of submissions here. We got up to 98 different people submitting. And so I thought it'd be a really fun look at how there's like look at the commonalities between a lot of the submissions because there's definitely a lot of commonalities, but then there's a few different camps that people sort of rested in. And I think we can use it as a really nice learning opportunity to sort of dissect the different approaches that people use, look at the positives of them. And so, yeah, I thought it'd be fun to use this experiment sort of as a learning tool to learn from other people in the way people are creating stuff instead of just focusing on how I would do something because there was a lot of good ideas and different approaches, as I said, that I think we can learn from. And first, before we dive into it, I just wanna say a really big thank you to one of the users in my Discord who is Zdash, who made this on their own and then shared it with me, which was just amazingly useful where we have just the breakdown of how people organize things and created things and just, I mean, check this out. The main layout, one person even used a table whereas everyone else was grid or flex along the way. So yeah, absolutely amazing and it makes life a lot easier to sort of, let's start off, I guess, by looking at this and we can look at some of the main differences which was how did people do the main layout itself? So that would be, if we come back to here, the layout of organizing all these cards together, what did we wrap this in, how did we make this layout? And as you can see, most people did go with grid. Some people, our good chunk of people still went with flex and then there was one brave soul who went with a table-based layout, probably just to be trying something a little bit different. And this sort of makes sense when you look at that layout, it sort of gives you that, you know, we have the two across the top and then one big one on the bottom. It's easy enough to do it with flex. There's multiple different ways we can do it but I think a lot of people saw grid as a simpler solution. You just have the last card span two columns and it's, you're done, right? So yeah, just to see that there's a few different ways to approach that. What's more interesting for me on this was the actual card layout here. And I'll share a link to this in the description as well just if anyone wants to take a look because I'm not covering everything but you can even see here people did cover like positioning, media, container queries, grid areas and like the Zdash covered a lot more than what I'm gonna break down in this video. But taking a look at the card layout, I can see once again we have that one person using a table-based layout but here's where things got a little bit more mixed up where there was more of a mix of, you know, was it just grid that was being used or was it flex and then there's the flex detail. So it's sort of like where was flex used as well? Sometimes on the layout itself, nothing was used and what I mean by that, like here the flex details would be like, how is this part organized versus the rest of it? So a lot of the people used flex for this, the profile pictures and then here we didn't really need it but then down here if you used flex there and you don't have it here well how do you handle that gap that's there and different things. So same thing, sometimes it was nothing and grid. Sometimes there was nothing with flex for the detail area. Sometimes it was flex everything. Sometimes it was grid everything and there was a finer breakdown of other mixes going on there as well. Of course there was other ways that the third card was selected since the third card had to be different. So was there an individual class on it? Was there the CSS selector, flex plus a selector, container queries, different options that were used there and of course the big range of units used. But the main thing I wanna focus on is this card layout right here. And we're gonna start with the flex side of things because there was two main camps within creating this layout using flex and this is sort of a nice illustration of that first one. So this is by user Niam Mekko again we had 98 submissions. I'm just gonna be using four main ones to sort of look at the major overall camps and there's obviously little or smaller differences between some of these but this sort of gives us a nice broad overview of all of them and what they did is let's go take a look and this was super, super common. A lot of people did this where up here we had a flex as you'd sort of expect going across the top like I mentioned the details area using flex which is fine and then down here we didn't need it but then that meant when we got down to this area over here what they did we have that flex that's going across the top but then over here with this content div that we had at the bottom here we needed to move that over we have the title actually and the paragraph there and they did that so they had the last child coming in here which again that was super popular. I wasn't really looking for if people used a class or not just because it's a really simple example it's not, you know, I wasn't looking if they created a modifier or class because it doesn't really matter too much for this but we can see here that the last child gets this margin left to push it over with just so it can match up and line up with here this one's using M's there's lots of people who just use pixels pixels probably a bit easier just because it's easier to fine tune, right? But they lined it up really nicely so that's definitely one approach to be able to push items over like that. Now there was a second approach that was also used which was this one right here so looks very similar in terms of like how the layout is getting broken down if we go and inspect on this one that main area here is using flex to create the two columns and then underneath we don't really need it and this is by Ekam Gokodan sorry for butchering names the more important part was down here with this one and this is sort of where the experiment lay and what they did in this case is and this was an interesting approach where you can see here they have the card it's set up with flex and they just made the entire thing two columns so, you know, here we have the image there and the advantage with this is we have the image that takes up the space the image needs and then on the other side of that you get this div here that takes up the space that that side needs and this, both of these approaches actually have a plus and a minus to them as you might guess, I'm not a huge fan of this one using a margin on the left just because it's magic numbering things in CSS is always a dangerous game if you've been working for long enough now again, I didn't frame it this way in the challenge I just said, here's a layout I gave almost like very, you know just match the layout as closely as possible so that can influence how people are doing it and, you know, maybe there's different results if I gave more instructions on things but often if we're the developer on something we're given a layout, we build it and then changes just happen even though they're sort of unplanned so one thing that can happen often is an image can end up getting bigger and the problem is if the image gets bigger it breaks the layout on this one so we end up with, you know then if that were to get bigger then we'd have to go back into the second area here and come in in this and then, you know modify that margin and then come over here and grab this one and modify the margin there and that's always the fun of magic numbers is having to come in and make changes to something when one other thing changes and this invariably happens all the time so that's where this one definitely has a, you know a nice approach in the sense that if my image if we can get it here, border radius width so let's just make that 100 pixels width and it doesn't wanna change, there we go if the image gets bigger all of the content is moving along with it and that's a huge bonus because I don't have to worry about refactoring any other code, I just, you know update a class, it changes the image and everything else works but this side has a drawback to it as well and the drawback here is that if we wanna take this type of approach where the image is in its own column what do we do here? Well, sort of means we need to have two different types of divs, right? Cause this one up here is organized differently might be easier if we come and take a look actually here so in here I have my card so it's just my card goes from there to here and then I have my user here and then I have the user has inside the user we have the image and then we have the name then when I look down here the content is just my title plus my paragraph right there then we can skip the second one cause it's gonna be the same but in this one we actually have to organize things a little bit differently the image needs to be on its own so it's not grouped in with this user class here that we have because we need it to be on its own to make its own column so in this case I have to think about okay, if I'm doing a card that's like this layout then I'm taking this one way I have to write my HTML in one way and if I'm taking this layout I have to write my HTML in another way and that's not a big deal and as we can see it works but I'm just sort of saying there's a trade off to both and then also you know you're probably hopefully documenting how things work in some way just so if other people you know if you're building something like this there might be a different patterns going on and just having to say like for this pattern you know for if it's this layout we need this if it's this other layout you have to organize it this way and I sort of like this where it doesn't matter I can always have my HTML the same way and then the layout will just function and that's really nice as a user of that layout if I'm putting together a card and a new page comes together as a testimonial and I have to add something I just put the content in there and I know it's going to work and then maybe I have a modifier class to make it you know a span tube or something like that but I'm just worried about the parent and then it's always putting the content the same way but then again if I make another modifier where I'm changing the size of the image for this testimonial it needs a bigger one or whatever it is and then my layout is all broken and then I have to create other modifiers in there so you know just looking there's positives there's negatives to either one of these approaches as far as I'm concerned when we're looking at it with Flexbox like this and honestly I'd be curious which one of these two if you had to pick between these two one of these was implemented you know in a code base of yours which one would you prefer to see and to use I'm really curious about just mindset and like the out of these two if these are the only two options which one of them you'd actually like better I'd love to know in the comments but we'll jump on over now to the grid approaches because there was a few different ones and this one actually by Z dash the one who helped compile everything for us all those stats which is really useful and this is also using pug but we don't worry actually maybe we'll just do a compiled version of that so we can see what the HTML actually looks like for us mortals who would need to look at what regular HTML looks like but in this one I'm assuming actually on the outside the use grid but again my main concern was on the inner areas and actually I think Z did one version of each but yeah we can see in here we have the card at the bottom and then in there we have the preview which actually they changed the order of things to try and make the DOM order make more sense as well but you can see we have the main part that I wanna look at here is we have the text coming here then we have this area right there and then we have the image that's right here so each one is just its own little piece and that's all living within a larger grid if we come and take a look over here it's gonna be the exact same thing I'm thinking yeah we have the preview we have the details and we have the author image and they're all living within a grid as well and there was a few different overall approaches with grid that were used but this was sort of like the way that everybody sort of handled it so the order of these might have been a little bit different but at the end of the day the way it was done was three little groups of content that were then organized within the bigger grid itself and to me looking at the solution one of the things I really like about it is that it sort of is the best of both worlds that we were just looking at right so if we did come on that image if we go and find that in the dev tools I'm in code pen, I'm modifying stuff in my dev tools but there's probably other ways we can do that but let's say I come here on my image and I make the images bigger the entire thing is just adjusting so you can see like it doesn't matter what's going on so I don't have to magic number anything to get that spacing that I wanted but there's also the other advantage of the organization within that is always the same so here I just have the preview I have the details and then here I did the image on its own line I can't move that but it's always the same organization of the HTML each and every time as well and I wanted to highlight this and just talk about this and this is sort of where I was curious actually when I made this challenge of how many people would do the inner bits with Flexbox versus Grid because a lot of people see the bigger layouts as grid stuff and then smaller component stuff as Flexbox and even when I ask people I hear that a lot of the time how do you decide between the two of them and the answer I hear a lot of the time is main layout is grid and components are Flexbox and I just want to sort of highlight here how even inside of components even on really simple layouts sometimes grid might be an easier approach to take or a simpler approach to take that's a little bit more robust of course it completely depends on the layout and actually there was one more I did want to highlight here by Dragon Error who actually used subgrid for this I won't lie when I first started doing this the reason I was putting this demo together was to come up with a subgrid example and I realized afterwards I didn't really need it but I thought that it was a fun approach to using subgrid because then what they were able to do by using subgrid on here is if we look here we have the subgrid coming up so you have this main container that's created but then you have this author section so the author section is like it has the picture and it has the title all grouped together in the header and then in there that you were using a subgrid so that subgrid is following those two columns that were created on the parent itself so another approach you could take and once again it's the same organization across all the different cards just we have a different span going on or we have these spanning both whereas on this second card we're just making sure that we're starting in the second column that's available to us with grid so yeah it was a fun little challenge for me I really think that grid is the clear winner for this one I think it's just a little bit of a cleaner solution that is more adaptable no matter what we throw at it which for me is a big win but like most things with CSS there's always more than one way to get an end result that works so I don't necessarily think any of those other solutions are wrong but I'm always just trying to look at sort of examples and see how people like to do things and see if there is sort of a different approach we can take that would be a little bit simpler or a little bit easier to maintain and if you missed out on this challenge we're like damn I would have liked to have tried it I'm gonna be starting to do challenges like this once a month maybe once every two months on my distro community so the link to it is in the description down below and I just think these types of things they're fun for people to do they're also a great way to bring up different discussions and learning possibilities by breaking down like sort of in getting these bigger picture views of the different code people right so again if you wanna join the Discord the link to it is in the description and we talked about other stuff too there's a help section in there and there's this general discussion you can hang out with people and meet other devs so if you do wanna check that out the link is in the description and with that I would really like to thank my enablers of awesome who are Johnny, Tim, Simon, Michael, Andrew and Web on Demand as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome.