- Read Tutorial
- Watch Guide Video
The next one I want to do is the main grid. Well, I guess we've already done it. Let's inspect the element. Well, we haven't done the main one, we've done the card and the inputs. What we need to do is the main grid. So the home grid.
So let's go ahead and set that up. Let's go to our app, and let's close this out. Let's go to .home and let's say:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
}
If you remember we have a header and we have a card. What we need to do is center this content. You'll see that our items aren't centered. So what we need to do is go in here and say:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
justify-content: center;
}
This is going to center everything. You'll see everything belongs in the center now. Next thing we need to do is basically center this now. The items in here. We can use this thing called justify-items.
What justify-items is going to do is, is it's going to go through every item. So the card and the header wherever that belongs, and it's going to center them. That's pretty cool. Now our grid is complete for the home.
In order to get these to center the way we want, that's going to be text-align. We'll do that when we have actually styled this component. What I'd like to do is basically continue on with the grids, and let's center each one of these components. You can do that with justify-items in our card inputs, and another thing called align-items.
If we go to this CSS article or whatever, the CSS guide CSS-Tricks, we can see that align-items. Let's see, I'll search it: align-items. Let's start with justify-items since that's what we used. You'll see that justify-items says aligns grid items along the in-line(row) axis, which is exactly what we just did.
Our entire home is one column. So it's centering it in this column. You see what is centering. Actually no, I'm being stupid again. It's centering each one of these items. So it's centering the header. It's centering this item and this item.
Let's comment out justify-content. What I think that will do is it'll put this to the middle still because we are justifying items. So justify-items is all we need in here, let's get rid of content. It's putting everything in the middle on each row. It's going to each column.
I feel like that's a wrong way of saying it because clearly, it's applying them on the column in each column. Yeah, that's weird. Anyway, we know that justify-items and align-items will center it. So you see align-items aligns items along the block column axis so right here.
So as you can see if we use both of these we can align our inputs in their own grid. In Firefox here, if we inspect and select inputs. You'll see they belong in each one of these things.
If you use align-items it's going to center it along the block axis. If we use the inline row axis for the justify item. Basically, if you justify and align, it's going to center it directly in the middle. So let's go to our input and let's say:
main.scss
&__inputs {
background-color: skyblue;
display: grid;
justify-items: center;
align-items: center;
}
}
It kind of tripped me up the way they're saying that. They are saying that align-items lines along the column axis. I was just thinking of it backwards. Technically these are columns, so it's going to align them along this axis in the middle, and then justify is going to do it on the row.
Now the reason I was thinking columns is because it just centers that in their columns; which would be, I think, a better way to describe it. Maybe I'm just not thinking about it correctly, but clearly, that's the case, but I feel like that would be a more intuitive way to explain it.
You get the idea align-items centers it along the column, and justify-items on the row. Okay, so we can center our items pretty easily with those tools in CSS grid.
The next thing we need to do is put the grid together for the inputs themselves. So right now, we have the home grid which contains the header, and the body the card. Then we have the card which contains the card, and the submit button down here, and then we have the card inputs which contains all of our inputs. Pretty neat stuff, but not exactly what we want with these inputs.
We need to fix the inputs. We need to add in another grid here that we can select for the input. So let's go into our code and let's go to input and let's say:
main.scss
.input {
display: grid;
&__title {
}
input {
}
&__number {
}
}
Save that and go back to our app in Firefox, and you'll see boom! We have 16 new grids. That's because we have 16 inputs that now have a display property of grid. Let's select the first one you'll see that we have that. You select another one you'll see we have that grid. I going to select the red one, just because I feel like red is a good color, and it's good against blue so we can see that grid well.
Feel free to use wherever you want. I'm going to use red, and that's if you're using firefox. You don't have these options in chrome. This is the only good thing about Firefox. I repeat, the only good thing. I'll never use Firefox for anything else.
Now we have these other options display area names, we don't need because that's something else. If you go to Chrome and you type in display area names using command + f. Let's see where is it...grid-template-areas., That's what it is. You have grid area name.
Basically, the idea of this is to, it's really weird and it seems tacky, you have the header main sidebar footer, and it's pretty awesome actually it works really well. I'm going to do it in a few of the other apps later on. Probably the e-commerce app. Actually, I have already recorded some of those. Boom. Hit you with the fact bomb. Anyway.
What we're going to do is we are going to do this. We're going to not use grid-template-rows. Basically, we want to set up a grid for each one of these. Okay. I was just explaining what the template areas was because of display area names. If you select that when you're using template-area-names that's going to give you the name of each of those, like header or whatever.
That probably doesn't make any sense. I propbably didn't explain it well enough yet, but we get around to it in a different app. So I need you to just chill out because you'll know that it's later on.
Okay, so display-line-numbers. This one is really helpful. Extend lines infinitely. It's not too helpful, but you can see how it might be helpful in seeing if it's aligned with things properly. So I guess it's helpful, but what we're focused on right now is displaying your line numbers.
Now I also think Extend Lines Infinitely can be pretty helpful in the fact that it just kind of shows you that you're selecting this grid. It's less pronounced when you don't have it selected. Especially with all the numbers. So when you select that you can kind of see it better.
Let's hit Display line numbers, and this is pretty important, right now we have the number up top with the input, and then we have celebrity or the text. In the design, we kind of have this layout. We have this top part, and then we have the label down here. Ours is clearly not in the right area.
We can easily get this effect by doing this. Let's go into our application here in the main.scss. Let's go right here in your input and for grid, we need to declare some rows so let's say:
main.scss
.input {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
&__title {
}
input {
}
&__number {
}
}
If we do that it's going to look wrong. We don't want this, but I need to specify what rows do. So maybe it won't do it. Oh yeah, rowsm I was thinking columns. This actually is what we want. It's exactly what we want. See we have three rows 1, 2, and 3. So 1 goes to 2, 2 goes to 3, and 3 goes 4. Now just so I can show you how grid row works. Let's go to main.scss, and lets say:
main.scss
.input {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
&__title {
grid-row: 1/2;
}
input {
}
&__number {
}
}
Now obviously this isn't where it belongs, but I need to show you how this works. It's going to push this up to 1 to 2. That's where the grid display line numbers come in. Let's create some columns so I'm going to get this in here, I'm going to say:
main.scss
.input {
display: grid;
//grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
&__title {
}
input {
}
&__number {
}
}
Now we're going to have columns. This is going to look wrong. I'm going to inspect this, and I'm going to select one of these input grids. Now with this selected, we can see that we have these 3 columns.
Now they should all be the same width, but the reason they're not is because this can only fill up so far because we have 4 columns. The input has a default width of however many pixels, so it's going to overflow. It's going to force it and make it so this one's larger, which is why this appears larger.
If we just had like another label. These would all be the same length because 1fr 1fr 1fr. Those are each one third because that adds up to 3. What we need to do is create some columns and grids, so that it can align to this. Obviously, I was just explaining how that all worked.
We have grid template columns, and think about this. I can inspect this by clicking on this, and you'll see that it doesn't have columns or rows. I can see what the width and stuff is. It looks like it's like 26 pixels. Right here we can say for our first column:
main.scss
.input {
display: grid;
//grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 26px 1fr;
&__title {
}
input {
}
&__number {
}
}
The first one is 26 pixels and then the second one you can be however long it wants. We don't care. We don't want another column. We only want 26 and then the rest of the space. The reason we do that is because we only have 2 columns because color is going to be in the same column. This is going to be in the same column. This border or whatever is going to be in the same column.
So pretty simple stuff. What we need to do is now specify where these belong, because if we just do this. It's going to put the first thing in this column, and the second thing and this column. The input and number will be in the second column, and the title is going to be the first column.
Let's go to our code or our application, and you'll see that right now. It looks like it may have matched more with what we thought, but still, we don't want this celebrity title in the first column. So let's be explicit with how we're saying this on the grid. Let's go back here and let's say for the title we want this to say:
main.scss
.input {
display: grid;
//grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 26px 1fr;
&__title {
grid-column: 2/3;
}
input {
}
&__number {
}
}
There is no 3, So you can just specify three or not at all. You'll see now in our application the title is now starting at 2 and ending at 3. Now just to be explicit, let's set our other rows even though it's working. We want the input to be along the same column 2/3, and we want the number to be from 1 to 2.
main.scss
.input {
display: grid;
//grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 26px 1fr;
&__title {
grid-column: 2/3;
}
input {
grid-column: 2/3;
}
&__number {
grid-column: 1/2;
}
}
This right here works pretty great, but another thing we can do is be even more explicit. We can name these. We can say:
main.scss
.input {
display: grid;
//grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
&__title {
grid-column: input-s/input-e;
}
input {
grid-column: input-s/input-e;
}
&__number {
grid-column: number-s/number-e;
}
}
CSS grid is a really useful tool, and it has helped me with all of my layouts really really well. It's easily the best tool I've used in CSS, and I really love it. It's made things a lot easier for me. Now, that sounded like I was going end the guide, but you've been mistaken because we have a lot more to do in this guide.
What I want to do is: we actually have our grid completed. Maybe I don't want to do more. That looks good to me. Although, when we generate it looks like it does this. I guess it's not that big of a deal, but I don't really want this to be moving much. I don't believe that it does that in the design. Let's see generate, but it doesn't resize or anything.
What we want to do is explicitly give this column a size. Let's see how big it is in here: 994 pixels. What I'm going to do is go to the code and in our home grid. We want to specify these, so let's say:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
justify-items: center;
grid-template-rows: [header-s] 218px [header-e card-s] 994px [card-e];
}
That's all we need. We don't have any other content here or at least I don't think we do. So let's check our grid to make sure. Hit inspect, and then I'm going to put this up and I'm going to select home. Looks like we just have these two items, but that's because we specified the grid to only have those two items.
If there were more items in here it would still have those two, if that makes sense. We only have two divs, so we only want those two. We specified the heights and that works great. So real quick, let's align our items along the column in our header. What we need to do is just say:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
justify-items: center;
align-items: center;
grid-template-rows: [header-s] 218px [header-e card-s] 994px [card-e];
}
That's going to go through all the items in the home and center them. Okay, that looks much better. It does look like a problem because you'll see that our card is now centered in its own grid. So it leaves all of this space, which is much different than our design.
What we could do is say only align items on this one, and the way we do that is specifically by going in the header, and just saying:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
justify-items: center;
// align-items: center;
grid-template-rows: [header-s] 218px [header-e card-s] 994px [card-e];
}
.header {
align-self: center;
}
Now that works, but I don't think I want to do it that way. Oh actually I worked so good that maybe I do. I'm just trying to think. We need to know multiple ways of doing things. We can't just be locked into only certain ways. We need to be versatile here, because this might not be a solution in a different scenario. It might not even be the best solution in this case.
So what we could do is: hmm let's see. We've specified a specific height for card. So I'm really confused why it doesn't start, I guess it gives us the rest of the space here for card or our inputs or what.
Okay, so maybe we do this: let's coming this out. I'm pretty sure I'll go back to it, but I think if we do this we go to card. Hmmm, I thought this was 900 pixels. Oh, so it's 900 pixels when we hit generate. It's going to be less when we don't hit generate. What we can do is a minimum of 736 pixels right here. Oh, here it is. This is neat. I think this will work.
So in 994 pixels, if we cut that, and say:
main.scss
.home {
background-color: rgba(207, 207, 207, 0.06);
display: grid;
justify-items: center;
// align-items: center;
grid-template-rows: [header-s] 218px [header-e card-s] minmax(736px, 994px) [card-e];
}
I think this will work. Let's try it it out. OK, let's see. That's stupid. I think the reason it's doing this is because we specify that this is 736 pixels. What we need to do is specify that it's 994, possibly maybe not. Interesting. I thought that would work, and I'm sad that it didn't, but maybe one day I'll figure that out.
Let's see some minimum height is 736. Let's try this: let's put in the max height is 994 pixels.
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
Let's try that. It still doesn't work. That's disappointing. Whatever. Let's go to main.scss, and uncomment this header, and comment out align items. Now, if I figure it out I'm going on with the guides then I'll make note of it, and we'll try it out.
Alright, that looks pretty good. The header is the most profound thing here. I guess it's not very profound, but we can see that the home here, it has a header and it has the body. So that's really cool stuff. What we need to do is a lot, but we have all of our grids set up so that's what's important. We have our grids. We have our content here.
What we need to do is end this really long guide, and hop into the next guide where we will begin styling our components extensively. We will move beyond the grids and we will apply the beautiful styles.
Let's go to our app here and go to the terminal, and hit command + j. Let's say git status, git add ., and what I'd like to say is git commit -m "set up remaining grids". Let's hop into the next guide and get into those fancy styles.