Your First Grid

[00:00:00]
>> All right, so let's go on to Chapter 2 here. And in Chapter 2, we're gonna do an introduction to grid. So now that you know how grid works, let's explore its structure and its syntax. So if you click the button here for the beginning CodePen, this should open up in a new window.

[00:00:20]
And in honor of the eclipse that's coming to America, we've got a whole bunch of astronomy pictures here as a theme for this particular course. If this is your first time using CodePen, anybody here in this room, have you all used CodePen before?
>> That's my first time.

[00:00:35]
>> First time, okay, great. So what you'll wanna do here as you open up open up your CodePen, you'll probably want to sign up for the free account. That would be a great thing to do. And then down at the bottom of the page, way, way, way down at the bottom, there's a button down here that says fork.

[00:00:52]
Fork is a fancy word for make a copy of this grid or make a copy of this CodePen to my own account. So if you click that button, it will, Make copy of the code here for you. And then the last thing that I like to do to try to set up CodePen is, by default all the code goes across the top of the page.

[00:01:10]
I prefer it to be on the left hand side. So up at the top here, there is a thing that looks like a cupcake. We're gonna tip that cupcake over to the left, and then we'll put your code on the left hand side. And I like this because you can grab the bar in the middle here, and you can drag things back and forth and see how the screen is gonna look kind of at larger or smaller dimensions, okay?

[00:01:34]
So anytime we get started here, we always wanna start by just looking at our HTML code. We still Start with an h1 here, we have our Moons of Jupiter. Inside of this, we have a series of figures. One of the features of CodePen, also in VS Code, that I love, is the ability to collapse things here using these triangles, so we can see what's going on.

[00:01:57]
We have four figures here inside of our document. And if we Uncollapse one of those and take a look at it. If you're not familiar with the HTML figure element, it's designed to associate a photo with text that goes with it. So in other words like a description for the picture.

[00:02:15]
On the top here we have our picture and of course with its alt text. And then underneath of that, we might have a caption of some kind. In this case, we have the fact that this is volcanic activity on IO. For those of you who like accessibility, note that the alt text helps people who can't actually see the picture.

[00:02:37]
So I've written here a pizza looking moon. [LAUGH] The outline of an erupting volcano is on the left, okay? Whereas the caption just says volcanic activity on IO, all right? So that is going to be the same for all of our other figures that are here on this page.

[00:02:55]
And these are the four Galilean moons of Jupiter. Always super cool to look at, right? These are the ones you can see from Earth. Has anybody ever looked through a telescope and seen these before? It's very, very cool. If you get the chance to just use a regular old telescope, you can see them, okay?

[00:03:14]
So-
>> Can I ask?
>> Of course.
>> Is the site HTML elements something that belongs within fake captions, specifically? Or can that be used outside of the caption?
>> Site can be used anywhere that a citation is taking place. And of course, I in this case I'm citing the source of my image.

[00:03:33]
So sites a great element for using them.
>> What is the point or what does it do that the a Trump? Yeah, it doesn't?
>> So, what site does is it flags this as a citation. So in other words, we know that this is now the source of something.

[00:03:49]
And that's the purpose of it. It'll be really helpful to people in particular who have screen readers. So, the first thing that I would like to do is, I would like to put all four of these moons next to each other in a nice little row, okay? And what I have right now, is I have four individual figures, one for each one of these moons.

[00:04:09]
So, if you think about it in your mind, how is this gonna to work? We're gonna have four moons going here in a row, correct? Make sense? Okay, so, somehow we need to apply grid such that these figures wind up being the so called children. And we need to have a parent that will contain our declaration to display grid.

[00:04:31]
Right now we don't have that here in our HTML. So anytime you are in a situation like this, and you started to markup your content semantically, which is what is already done here for you. What we're gonna do then is add to this a div in this case, because all it's gonna do for us is serve as a grouping mechanism for these items.

[00:04:52]
So we'll say div with a class of whatever you want to call it, I'm gonna call mine grid-container. Grid container grid parent mean the same entire thing. And we can close that right after the figure. Okay? So, now I have grouped my figures all together very very nicely here on my page.

[00:05:23]
Now when I go into my css here, just to point out what I have, I put in just a little bit of basic formatting here. Basically assigning a font family to the body. Setting up my images to have a max width of 100%. This makes them scale be a little bit flexible as the screen gets smaller.

[00:05:44]
We haven't swapped these out using picture sources or sizes or source set just yet. So we're just gonna work with this max width little thing for now, and figure by default has a little bit of margin or padding associated with it. So I've turned that off, all right?

[00:06:00]
So here in my CSS style then we need to set up a grid-container- class. And we get started, guess how we start working with grid? What would be the first thing that I put here? Anybody want to take a guess? Yes.
>> Display?
>> Display what?
>> Grid.

[00:06:20]
>> Grid, awesome. Well done, and absolutely nothing happens. Okay, we gotta keep going. Now I want to have four columns. Anybody know how I might state I want to have four columns here on my page?
>> Call dashboard.
>> That's a great idea. That would be a perfect name for a class, but the css property is grid-template-columns.

[00:06:47]
So grid-template-columns. So in other words, we're gonna set up a pattern. And this pattern is going to be some number of columns going across the page. And I am going to type the following, 1fr, 1fr, 1fr, 1fr.
>> Online people said fraction.
>> Fraction, fraction is what it stands for.

[00:07:06]
So, this stands for fractions. One of the wonderful things about grid is we do not have to do math. We can just say hey grid, break this page into four fractions, and it will do the math for you and look at that. We have four evenly sized columns here on the Page.

[00:07:22]
Isn't that amazing? With two little declarations here, we are done, we actually have our four columns. So that is gonna put these things all next to each other with no space in between. I can hear the graphic designer screaming already, how about you, okay? So we want some space between these, we can say gap, something like two rem.

[00:07:46]
What is a rem?
>> Relative something.
>> Relative something.
>> [LAUGH]
>> [CROSSTALK]
>> It's the relative size of an M. It's the relative size of an M?
>> Yeah.
>> Yep, kind of like that, it's a root relative M. What is an M? So, so helpful, right?

[00:08:06]
What is an M? In typography land, the letter M is often used as a reference letter to determine how big or small something is. So if you have one of those really fat fonts, your letter M, it's one M wide, but it's a really fat one M. Whereas if you're using like the narrow width fonts, it's a really skinny M and that's still one M, okay?

[00:08:26]
So it's relative to that. Here we're looking at the root of the documents of HTML. Usually, this means 16 pixels. Why would we wanna go through all the bother of doing this with REMs?
>> So if you change your font, it'll change as well.
>> Exactly, so if I change my font size, if I want to scale things up, everything scales up proportionally, right?

[00:08:54]
Okay, so my gap number here, by the way, 2rem actually has two dimensions to it. If you prefer, you could have two numbers here. We can say our column gap is 2rem, and we can also say we have a row gap. Maybe you want a different number for that, I don't know, 1rem, okay?

[00:09:21]
We don't have any rows yet. But you can break those into two numbers using that type of notation. You can also combine these. You'll also see this done. So we have just regular old gap again, and I think it's 1rem, 2rem. Yes, I always get confused, which number comes first, so it's row, and then the column.

[00:09:45]
What if I wanna have two moons on the top and two moons underneath? How am I gonna set that up? Anyone have a suggestion based on what you know? Or at least what would be a start?
>> Have two, 1 fr in the columns
>> I change this to just 1fr, 1fr.

[00:10:02]
Hey, look that it worked. That's kind of cool. So let's talk about the it's probably kind of surprising that that actually worked, isn't it? [LAUGH] So why did that work? Well, this is grid trying to be helpful and guess what you want. So what grid did was it looked at how many figures we had, we have four of them.

[00:10:26]
And we have in our template columns, we only have two template columns. So grid said, well, I've got to do something with these other two pieces of content that are affected by the grid-container, what should I do? Well, I'll just wrap around and put them in the next row, okay?

[00:10:42]
Now, we can declare rows as well, I often don't because I think usually columns is sufficient for this very reason. This is called the intrinsic properties of grid that it's gonna try to guess for you, but you can call out your rows as well if you prefer.