Hey guys. 1
In this module we're going to be learning all about CSS Grid, the CSS tool that's going to make it 2
easier for us to create two dimensional layouts. 3
After learning about Flexbox, you would probably look at a layout like this and think that you could 4
have a horizontal row based Flexbox system with multiple divs inside and you can define their widths 5
and also their alignment and so on and so forth. 6
Now how about a layout like this? 7
Can you think of how to create this using Flexbox? 8
It would be pretty hard, right? 9
Well, you'll be relieved to hear that it's not just you. 10
Web designers thought creating these kind of complex layouts is pretty difficult, too, which is why 11
they created Grid. 12
And Grid is here to make our lives a lot easier. 13
So if we look at the Swiss website where they've got the weather forecast for Bern, you can see that 14
it's actually created using grid and we can divide up the layout to see what the grid actually looks 15
like. 16
You've got all of these different sections and you can imagine just how hard this would be to make using 17
just Flexbox or floats. 18
And on top of that, look at how beautifully responsive this website is. 19
It shrinks and preserves the grid format, and everything is more or less proportional depending on 20
how the designer wanted it to look. 21
At this point, you might be wondering, well, what exactly is the difference between Flexbox and Grid 22
then? 23
Do I just pick one of them or is one of them better than the other one? 24
Well, here's how I tend to think of Flexbox. 25
I tend to think of it as a tool that helps me align content along a one dimensional line. 26
So this is a horizontal Flexbox, and it's really easy to use it to place our items and define how we 27
want them aligned on our page. 28
Now with Grid, however, on the other end, I think of it as a tool for laying out content along a 29
two dimensional grid. 30
So maybe I would want a navbar over to the right. 31
Maybe I would want some content over here. 32
Maybe I'd want a footer down here. Depending on how my design looks, if it is in a 2D, 33
so there's an X and a Y, then in most cases, you're going to be better off using grid. 34
Generally, Flexbox is really great for one dimensional alignment and Grid is really good for 2D layouts 35
where you have almost like a table structure with columns and rows. 36
But that makes it sound like as if you're going to be choosing between one of these. 37
It's either going to be Flexbox or Grid, And some of you might be wondering, well, why did you teach 38
us Flexbox anyways? 39
It seems like grid is far more powerful. 40
If I can do things in 2D, it's obviously better than 1D, right? 41
Why did I bother learning Flexbox? 42
Well, in reality, these tools have different strengths and they have different weaknesses. 43
Most web developers would use a combination of these two tools alongside other things such as floats 44
or bootstraps or other frameworks in order to create their design. 45
In this case, you can see we've got a grid style 2D layout, but within the grid one of these containers 46
is actually laid out using Flexbox. 47
This is really, really common. 48
Even in that example I showed you earlier where I said this is a really beautiful example of grid in 49
action. 50
You can see that actually there are components of Flexbox in this. 51
For example, this is a Flexbox. 52
It's laid out in a Flexbox column, 53
and it's a really good way of setting the alignment for each of these items. 54
So this column-based Flexbox is sitting within this grid. 55
So sometimes you might have a Flexbox inside a grid and other times you might have a grid inside a Flexbox. 56
So it really, really just depends on what it is that you want to create, 57
and knowing how to use different tool sets gives you the flexibility to create things exactly the way 58
you want it to. 59
And as my grandad says, the only thing that doesn't weigh you on your travels in life are skills. 60
So the more skills we have, the better we'll be able to adapt to situations and the easier things will 61
be. In order for you to better compare Grid versus Flexbox, 62
because I know right now it seems a little bit abstract, this idea, 63
I created a website to demo the two of them side by side. 64
If you head over to appbrewery.github.io/grid-vs-flexbox/ 65
then 66
you can see this example that I've created for you. 67
Just because I said grid is for two dimensional layouts and Flexbox is for one dimensional layouts, 68
it doesn't mean that you can't create a one-dimensional grid, but it does behave a little bit differently. 69
Let's take a look at this grid we've got, and I want you to watch how it behaves when I try to make 70
this page smaller. 71
Notice how grids, natural inclination is to create a grid and everything lines up with each other on 72
a column and row basis. 73
So we have a column here and we have a row right here. 74
And notice how the gaps between all the items pretty much all match up with each other. 75
They're completely straight along, a very nice grid. 76
Now, Flexbox behaves very differently. 77
It's actually very difficult to get the Flexbox items to line up with each other like this because it's 78
flexible, right? 79
It tries to actually adapt and squish the content so that everything gets placed on the screen as I 80
expand. 81
This may be occasionally some items will line up with each other kind of like this, but it's not perfect 82
alignment, right? 83
Depending on the kind of behavior you want your items to have, do you want them to prioritize spacing 84
out content and aligning content, or do you want everything to be boxy like a grid? 85
Have a play around with this website and see what other things you can spot that are different between 86
Grid and Flexbox. 87
Now that we've seen how Grid behaves, it's time to show you how to create an actual grid. 88
Here 89
I've got a div that contains four paragraph elements. 90
Now these four paragraph elements are going to be my grid items. 91
And on the outside of these items I've got a container which is going to act as my grid. In order to 92
style this HTML so that it looks like this, 93
all I have to do is target my container using the container class and then set the display to grid. 94
Now, this should be familiar to you because previously, in order to use Flexbox, we had to set the 95
display to flex. 96
In this case, we're using grids, 97
so we set it to grid. 98
Next, I have to create some "grid-template-columns" and some "grid-template-rows". 99
Now, we're going to go into this notation in a lot more detail in the coming lessons, but it's also 100
pretty easy to understand. 101
What I'm doing here is I'm saying I want to create columns that have a fractional ratio of 1 to 2. 102
This side should be 1. 103
So the first column, if it had a width of 1, then I want the second column to be twice that width. 104
If this was 100px wide then this would be 200px wide. 105
But then for my rows, I've said I want it to be 1 to 1, two equal fractions. 106
And that's exactly what I get. 107
I get two rows that are pretty much equal in their heights. 108
And then finally, I've defined a gap of 10px so that this little distance between the columns 109
and between the rows is 10px. 110
And that allows my paragraphs to separate from each other without any sort of margin or padding, just 111
using these few lines of code. 112
I've managed to create a relatively complex layout for my website. 113
Let's go ahead and try this and write some code ourselves to see what happens when we set something 114
to display Grid. 115
Go ahead and download the starting code for this exercise 10.0 Display Grid, 116
and if you take a look inside index.html, you'll see that there are a whole bunch of divs that 117
I've created for you. 118
Now, the goal that we're trying to achieve here is to create a chess board. 119
And as you can imagine, if you had to do this using Float or Flexbox, it's a little bit painful, 120
especially if you wanted each of these divs to line up perfectly with each other. 121
But as we know, this is the strong suit of grid using the index.html and what you've learned about 122
CSS grid, 123
see if you can style this container to set it to use grid and create this kind of outcome. 124
There's a couple of things to note. 125
Each of the squares, white or black, should be 100px by 100px. 126
So they're squares. 127
And I've chosen some colors for a more modern, I guess, sort of chess board. 128
You can just make that white and black if you want to. 129
It's totally up to you. 130
But the outcome is to create something like this using our index.html and you should write your code 131
just below the comments here. 132
Pause the video and see if you can complete this challenge. 133
All right. 134
Hopefully you've given that a go and let's run through the solution together. 135
Now, the first thing we want to do is to open up our preview so that we can see what's happening as 136
we're doing things. 137
And because everything is invisible, because our divs have no size and they have no color, let's fix 138
that first. 139
So if I go ahead and target all of the white squares and set them to have a height of 100px and 140
a width of 100px, then if I go ahead and give them a background color. 141
So let's use the one that I've got in the example, then they should hopefully show up. 142
There are huge stack kind of just stacked along here, but we won't worry about that too much right 143
now. 144
Let's go ahead and do the same for our black squares to give them a size, 145
and to give them a background color. 146
And I'm going to use this color I've defined here. 147
Now we've got our white and black squares. 148
Now, unfortunately, they're all along one line at the moment because this is remember the default 149
layout of HTML flow. 150
All divs are set as display: block. 151
So they're going to try and occupy the full width of the screen. 152
And even though we've defined the width and the height, they're not going to come up and sit next to 153
each other unless we add some more CSS, which is exactly what I'm going to do right now. 154
So I'm going to target the container that contains all of these divs and I'm going to set it to display: 155
grid. 156
Now, this is not going to do too much just yet because we need to define our template-rows and our 157
template-columns. 158
If you look at the goal example, you'll see that a chess board is made up of eight by eight squares 159
and you can count these if you want. 160
And in total there are 64 squares and there are 64 divs that I've already included in the starting code. 161
So we don't have to worry about the HTML. 162
We just have to set up our grid. 163
Let's go ahead and set our grid-template-columns so we know we need eight equal-sized columns. 164
So we have one, two, three, four, five, six, seven, eight, 165
and once we've created all the columns, then you can see even if we didn't create any rows, we've 166
already got ourselves a bit of a chess board that's created. 167
Now we're going to explain why Grid is able to automatically infer what we want. 168
But just in case you did this and it's totally fine, we can add in the grid-template-rows just so that 169
it's really clear what it is that we want. 170
Eight equal size columns and eight equal size rows. 171
One thing you might notice with our solution is if you had extra width, then there's all these gaps 172
that show up between each of our columns. 173
Well, the reason for this is because our container is trying to take up the full width of the screen. 174
What we can do is we can set the width to 800px to fit all of our items. 175
And then this way we actually get a compact chess board that doesn't split up because it's trying to 176
be responsive. 177
Now, the default behavior for a grid container is to try and take up the full width, but only have 178
as much height as it allows to fit the content so we don't have to change the height. 179
Now, don't worry too much if you didn't set the width, it doesn't matter because this exercise is 180
all about you being able to figure out how to use the grid-template-columns and how to set the display 181
to grid so that we can turn our divs into our chess board. 182
As long as you've achieved that, then I'm happy that you've passed this challenge. 183
Now let's head over to the next lesson where we learn more about how to customize our grid.