Columns & Cover: Desktop Layout

[00:00:00]
>> Okay, so here's the last one. We're gonna go to the desktop version of this. This has an @media(min-width: 800 px). And if we look at that, this is the crazy one. Remember where we have these columns, where they're not breaking at the paragraph? There's something else weird that's going on here, okay?

[00:00:31]
So, that is what you're going to work on next, and then I'll go through the answers with you, all right? So, we've got actually two little layouts here that we're doing. One is sort of an intermediate, where we're gonna have two columns of text here, followed by the image.

[00:00:48]
And then, the last one will be the three columns of text on the top, and the image on the bottom. So let's go through those. Here at 800 pixels, well, we got here a couple of little things to do. First of all, our fancy text is bigger. So our font-size: var {--xl}, we want it to be even bigger now So the next thing I'm going to do is set my article to still have the two columns, but I want them to be different sizes.

[00:01:25]
I want to have my grid-template-columns to be 2fr, 1fr. So in other words, I want my text to take up twice as much room as the image. Great, and then on the image wrapper itself, I'm gonna give it a little bit of breathing room. .article-img-wrapper {margin: .5rem 0 0 2rem}.

[00:01:58]
How did we determine that? Lengthy testing, of course, to figure out exactly how it was going to be. We're not done with the text on that side, it'll make sense momentarily. All right, so now what I'm going to do is, what I wound up doing here, our paragraphs are always displaying together as a unit, right?

[00:02:21]
Paragraphs are always displaying together as a unit. So what I wound up doing here is I added a div class "main-text". To put around these paragraphs. We always want them together. Now I can treat them as a unit for layout purposes. Rather than worrying about where exactly these paragraphs are gonna go and how they're gonna display, I've grouped them together and treated them as a unit, okay?

[00:02:52]
And when you do that, you should go back and check your other breakpoints and make sure you didn't break anything along the way. We won't have, which is why I could add this at this late point in time. Everything else is fine. Okay, so then what I'm going to do in order to make the magic text thing happen here, is on, Oops, I think I have one too many.

[00:03:26]
Here we go. That's there. Okay, great. Then, what I'm going to do here is I'm going to set my class of main-text. And the trick is columns: 2. You didn't know this trick, did you? This is totally a trick. So that's all it takes. We put columns 2 on the parent here, and the children will lay themselves out here into 2-2 columns, breaking wherever they need to in order to make two columns of roughly the same height.

[00:04:03]
Although, you'll notice that we have a bit of a funny gap here at the top of this column. Anyone have any idea where that comes from?
>> Is it a default styling of a div, or something?
>> Default styling of a div or something? Could be, but-
>> Is it centered vertically, and there's just a little bit of extra padding or margin at the top of that element?

[00:04:27]
>> There could be something like that. Well, how do we figure this out? We could say border: 1px solid black, okay? So it looks this div here, right? Has got no padding or margin on it. So let's look at the children. Border: 1px solid blue. Okay, so our paragraphs, as we knew, we actually want a little bit of space in between them.

[00:05:04]
And the way the paragraphs are set up inside of the browser, they have margin. They have one rem of margin on the top, one rem of margin on the bottom. Here's something else that they don't teach you in boot camp. 1 plus 1 equals?
>> One?
>> One.

[00:05:25]
>> [LAUGH]
>> Okay, when it comes to margin, and you have two paragraphs here, you want those two paragraphs to be one rem apart, not two. When you start your paragraph, though you still wanna have some space up here on the top. So padding, 1 rem plus 1 rem equals?

[00:05:47]
>> One.
>> 1 rem plus 1 rem on padding vertically equals?
>> 2
>> 2 rem, so that is additive, margin collapses, okay? And the larger number wins. So 2 rem plus 1 rem in margin equals 2 rem, okay? Yeah, I know. [LAUGH] Dinesh is going, no. So what we can do here then is say for our .main-text p, we could say something like margin-top: 0.

[00:06:28]
And when we do that, the top margin goes away but we still have space between our paragraphs, because the bottom margin still exists. [SOUND]
>> That explains it.
>> Yeah, crazy craziness. Okay, and then, of course, you can turn off your borders and it will look much prettier.

[00:06:54]
And that is why you always put borders on it, cuz it will tell you where the issue is, all right? So that is gonna give you two columns of text and one column of image. Everybody good so far? All right, suggestions for how we might go about then making three columns of text with the image on the bottom?

[00:07:17]
Anybody have any ideas?
>> Image takes the whole section.
>> Right, image has to take the whole section.
>> Change the grid template again?
>> You're gonna need to change the grid template again. But guess what we're gonna do this time? Article {display: block}. So now, we're back to display blocks.

[00:07:39]
Here's the image down here on the bottom, yeah? Here's our main text, going all the way across the screen, and our headline, up here on the top. So just cuz you started with grid doesn't mean you have to stay with it, okay? So now, all we have to do is disable what we put in place.

[00:07:56]
So our .maintext, what are we gonna do with this?
>> Three columns
>> Columns: 3. So easy. Aah, so nice and perfect for those larger screens, right? So now, when you get to those giant screens, you can set up your articles to have multiple columns. It makes the screen look more filled, but it's still easy enough to read.

[00:08:23]
>> And if you have the max-width setting, and the margin auto, that will fix all the sizes.
>> And you have dealt with, yeah, your large screens, yeah.
>> If your screen is so wide that you sort of run out of text to fill three columns, would you just make three very short columns?

[00:08:41]
>> Yes, you could, or you could make two, put the image next to it.
>> What will this default to though, if we don't give it something to do?
>> Well, we gave this a max-width of 1200 pixels, and I'm at 1206 right there. But it would continue to go larger, and you'd wind up with extra space on either side.

[00:09:00]
Yeah, okay, so to fix this image then, all we have to do is turn off what we did before. So .article-img-wrapper, we're gonna set the max-width to 100%. We can set a height to 500px. Aah, so lovely. And then, we can give it a little bit of breathing room, margin-top: 3rem, give us a little space there.

[00:09:35]
And it looks like I still have a little bit of space over here on the side. So let me just change margin-top to margin: 3rem 0 0 0. Which will zero out anything else that I have there, and just set my top margin to 3rem. And there's my last layout.

[00:09:56]
How fabulous is that?
>> Clever.
>> Super amazing. And, of course, as we go back and we slide through this, we go from two columns of text and the image, to one column of text plus the image, to the image on top and the text underneath.
>> Since we used display as block.

[00:10:20]
>> Mm-hm.
>> All the previous grid columns are not supported for the image.
>> For the largest-
>> For the largest point.
>> That the largest breakpoint. Often, I set display block for the mobile part of it, and then turn on grid or Flexbox later to blank word columns on the page.

[00:10:36]
But the point of this is that you can also do the reverse. We actually wanted it earlier but we don't want it later, yeah. Okay, how are we doing so far?
>> In the later breakpoints, when you have the same selector and two different breakpoints, does the older one get wiped out completely, or only the properties that you mentioned in the nuance?

[00:11:04]
>> Such a great question. Okay, so let's just look at article here going through this. So we know that in the base, we didn't actually style the article, so there's nothing there. I won't even open it. Here, we start with article here in mobile. We have a padding set, a max-width, a margin, and the display grid, right?

[00:11:22]
All of that carries into this next breakpoint, but we change the values of grid-template-columns, right? So now, two columns instead of one, but we still have a max \-width, and a padding, and a margin. When we go to our next breakpoint, we change the number of columns again, all that other stuff is still holding, right?

[00:11:41]
Because these are min-width, so everything is continuing to cascade through. We never turn off those styles that came before, all right? And then, when we get down here, article is now display: block. But we still have that padding in place, the max-width of 1200 pixels, and all the rest of it.

[00:11:59]
>> But by changing display, now it's ignoring all of the grid instructions from before?
>> Correct, because grid-template-columns means nothing unless the display is set to grid. By setting it to block, we've canceled out all of those other styles. So it's very efficient.
>> So this is something we defined on the 600 px1, and then overwrote at a higher one.

[00:12:25]
And I guess I'm struggling to articulate the question, but I think I'm with Andrew too there. Just like, how do we know what gets taken over? Is it simply the largest screen, the largest media breakpoint gets listened to, or is it the last bit of code that we wrote?

[00:12:40]
>> The answer to that is yes. [LAUGH] But all of those things are true. So in this particular case, we have this appearing last. They're all article, the selector is exactly the same all the way through. Starting off in block, which is the default browser value, we then set it to grid.

[00:12:58]
And now, here at the end, we put in this min-width of 500 pixels and we're saying to display grid again, after we said display block at 1000 pixels.
>> So this is grid display.
>> This is grid display. You can see there's our three columns of text plus the image over here.

[00:13:13]
>> Okay.
>> So
>> So it is the latest thing. It's the old JavaScript thing of something gets overwritten later, or something?
>> And again, it depends. It still depends, because there were ways that I could make this not work, and work, and so forth. But the easiest way to do this so that you get the least confused [LAUGH] and that makes the most sense, is to put your media queries in order.

[00:13:38]
So they get progressively larger. So that you're overriding things stepwise. Does that help?
>> Yes, it does.
>> Okay, this is also a useful property if you ever do anything with printing, and you wanna have columns in your printing just so that you take up less paper. You can include these as a print style.

[00:14:02]
Something to file away, yeah.