Cards: Desktop Layout

[00:00:00]
>> So we have a desktop-based layout here, and the desktop layout is going to have the two problems associated with it. Remember that the desktop layout is going to have the layout within the card itself and the cards that are there on the page. So if we look at our desktop layout, we have our cards, somehow you've got to get those order now buttons all lined up across the bottom.

[00:00:24]
That'll be a little bit tricky for you. The images should be all the same height, we've talked about how to do that. Notice that the paragraphs are in line with the images. Right now they're indented a little bit, so that'll be something else to address. And then you're gonna have to figure out how you can get the three across, and then the two that seem to be centered there in the second row.

[00:00:47]
Rather than having those two lined up under the first two, which is how this is normally done for layouts. So give that a shot now, their desktop breakpoint will start at 1025 pixels. So add yourself a media query down here at 1025 pixels, and I'll show you my answer here momentarily.

[00:01:14]
Hopefully, you've all got that desktop layout in place. Let's go through my solution here. Now, for the starting media query, I had given you a width of 1025 pixels. I'm gonna use 900 here, mostly because I need a little bit more room to code. My screen is only 1440 pixels wide, so I'm just gonna modify this media query a little bit, but you can stick with 1025 as you are working.

[00:01:42]
So our media query is gonna have a min width of, in my case, 900 pixels. And now what I wanna do is tell you we've got two layout problems that are going on here. We have the card layout itself and we have the relation of the cards to each other.

[00:02:03]
So the first problem I'm gonna solve is the card layout itself. So to do this, we are gonna start with .card. And we're gonna continue on with what we have from before. We have a series of grid-based layouts in our cards from before, so that grid-based layout will continue here.

[00:02:21]
We are gonna set the grid template columns to 1fr and we're gonna set our grid template rows to 10%, 50%, 20%, and 20%. There we go. All right, now things are starting to move on the page, but they still look weird. Remember that each of these elements has assigned to it already, a grid column and a grid row value that we're going to need to reset for our new layout.

[00:02:56]
So we will continue on with that. I'm gonna set my margin on my cards to 0, the padding on my cards to 0 as well, and then we will address each element here., so our .card h2. We need to turn off the placement for our previous h2. So this would be grid-column: auto.

[00:03:22]
Previously, we had something like whatever to /5, now we set it to auto, and that will turn off that particular setting. We won't see much change here with the h2, because it's already yet the first column in the first row. Grid-row: auto. All right, then of course, we have some other things to do here with this h2.

[00:03:46]
I'm gonna give it a bit of margin of 2rem and. Auto. I'm gonna say text-align: center. And of course, we need to turn it around. So our writing mode will be horizontal-tb. And so horizontal, of course, we're now gonna go horizontally instead of vertically, tb top to bottom.

[00:04:18]
Yeah, all right. Then we're gonna go on to our card image, .card.card-image, and grid-column: auto, grid-row: auto. Totally awesome. So, we're just turning off that location. We have our .card p, grid-column: auto, grid-row: auto. We can also turn off or change some padding, 1rem: 0, margin: 0. Then for our button at the end here, the .card p:last-of-type.

[00:05:16]
We're gonna say again grid-column: auto, grid-row: auto, align-self: start. And what that's gonna do is move this button around here in space and justify-self: center. There we go. So that is gonna give us a button that's pretty much as wide as the text. And ultimately, those buttons will wind up lining up in a row once we lay them out as such.

[00:05:51]
The very last thing I need to do is turn off some padding on this button. margin: 0. Okay, so now I have a series of cards. They're all stacked on top of each other, and this is the way that I'm gonna want them to display. So the next thing to do is to get the cards to all display here on the page.

[00:06:13]
And anytime you see this style of layout, where elements are not aligning with each other. In other words, we've got those two items, those two cards in that second row, they are by themselves and in the center of the page. This is a dead giveaway that this is Flexbox because Grid will not allow that kind of layout.

[00:06:35]
Grid will always be aligned with those other two columns there at the start, so cappuccino under coffee and macchiato under iced coffee, that would be a grid layout. Anytime you see this kind of thing, it's definitely Flexbox. So let's go through and set this up with Flexbox. Once again, in our HTML, we will look at our children and parents as we always do.

[00:07:05]
And when we do that, you will see that we have a section with the card container class on it, and we have five articles with a class of card. So the card container will wind up being our flex parent, our individual cards will be our flex children. All right, so to set this up.

[00:07:33]
I'm gonna go back here to the top of my media query, and I'm gonna put in my card-container. Okay, so what we're gonna say now is, of course, display flex. flex-flow: row wrap. The wrapping part is really important because we want this to wrap onto a second line.

[00:07:55]
By default, the property FlexFlow is set to row no wrap, and as you see, that crams everybody together on the line. It's kind of a cool look for those images. If you like it, you can keep it, but not in the design that I have. Actually, before I go any further with this and put in more properties for my card container, the cards themselves, as you can see are as wide as my screen right now because that image is quite large.

[00:08:25]
So we need to assign a width to these cards. When we are working with Flexbox, we do not use the width property, the property that we use is flex-basis. And the difference is this. Width is an absolute value, if I'd say it's a width of 25%, it will never be 24.9 or 25.1, it will always be 25%.

[00:08:49]
In the case of flex-basis, if I say it's 30% wide, that's a kinda number, it may wind up being 28% 27%, maybe there'll be 33%, but kind of it'll get close to 30%. So that's the way the difference between width and flex-bases. So here on my card itself, we'll set our flex-basis to 30%.

[00:09:16]
And that will give us our three cards here on the top, and that'll give us two down here on the bottom. So we're getting there. Now, here on my card container, I can give this a gap of, let's say, 5 rem, 4%. So we'll get some distance in between each of these cards and in between the rows.

[00:09:44]
And then how to get them all centered and looking pretty? That will be justify-content: space-evenly. And so that will take however many cards you have in a row and space them evenly, so you wind up with the look that you are looking at here. I add some other styles that are here on this card container.

[00:10:12]
Just for completeness, we have a max width of 1200 pixels. We have our padding. Of 0, 2rem, 5rem, 2rem. So they'll give us padding all the way around our card container and. Margin: 0 auto to center the whole thing on the page. So when the screen gets really large, and I can't make it quite big enough here, but you can at home.

[00:10:49]
You'll see that we'll have the extra space, it'll be spaced evenly on the left and the right sides, and you can see that our cards line up evenly under each other. You can also see that our buttons are all aligned perfectly on the same line here in our cards.

[00:11:05]
And so that is the solution to the outrageous cards. We now have all five different layouts all baked into this. Pretty amazing.