Alright then, so the first layout that we're going to create is this one right here. It's
called Globe Rolemap and it's like a little blog site or something like that. And we're
using CSS Grid in a couple of different places on this design. So first of all down here
we can see that we have three article previews, if you like, and these are split up into three
columns. So each one takes up a full column in width. So our CSS Grid is going to have
three columns of equal width, right, and that's how these are displayed. But also we're displaying
this featured article at the top on that same grid as well. Only this time it spans across
all three columns in width. So the first article takes up all three columns in width and any
subsequent articles take up a single column in width. Now the cool thing about this design
is that we're also using a nested grid to display this information right here, this
page. So we have the original grid with three columns and this article right here is taking
up all three columns. But that article in itself, we also say, displays that as a grid
as well. And inside that grid has two columns this time. One column on the left for the
image and one column on the right for the text. And if we inspect this, open it up like
so, I'm going to just get rid of that and refresh. Now if we click on this grid right
here, which is the grid container, the whole thing, we can see those three columns right
Let me make this a bit bigger so we can see it spread out originally, how it was. So all
of these three columns right here. And also if we click on this first article right here
this featured article, we can see this is displayed as a grid as well. If we click on
that and take off the other one, we can see that this thing right here has two columns
Alright, so there are two different grids. So this is the project and layout that we're
going to build in this lesson. And also remember you can get the starter file for each project
from the GitHub repo. The link is down below the video. So just get the starter file from
the branch drop down and download a zip folder of that. And we're going to be working inside
this multi-column folder in this particular lesson. And inside there we have these starter
files, which I'm going to go through now. So again, inside the starter folder, the starter
file for this project, we have an index.html file. Nothing in there at the minute inside
the body, but we do have this link to the styles.css file, which is other files. And
inside there, nothing special. We just have this font import from Google Fonts, which
is Poppins. And we use that in the body, give the body a margin and a background of this
pale green color. We strip out the padding and the list style text from UL and LL text
Then for H1, H2, and H3, we give it this kind of grainy green color and a similar one for
paragraph text as well. So dev, simple styles, nothing to do with grids yet. And then finally
we have an image folder where we have three images, all from Unsplash. I got these. So
just stock images, and we're going to use those in our design. So I've already opened
this up by right-clicking and going to open this live server. And it looks something like
this at the minute, just a green background. So now what I'd like to do is get cracking
on the HTML template first of all. So to begin with, I'm going to do a header for the top
of the page. And this is nothing to do with grid. There's going to be no CSS grid applied
to the header at all. This is just so we can have the title at the top, which is Globe
Roma. So that's the name of the site. And then below that, we've got our main content
Now, this is going to be a grid. So we'll give this a class of grid container. But again
you can call this class whatever you want it to be. It doesn't have to be grid container
And also, it should be grid, not grid. Grid container, all right
So inside this now, we have several different articles. We have four in total, remember
One, which went the whole way across the page, the featured article, and then three others
that start underneath. So we need to make four articles. I'm going to do an article
at the top right here, first of all. And then the first thing in each article is going
to be an image. Now, this first image is going to come from inside the images folder, and
it's going to be this one, one, okay. So the source is going to be image, and then
forward slash one dot png. And then for the alt tag, we'll just say featured image, like
so. All right. So then underneath that image, we're going to have a div for all of the actual
text content. And inside that div, we're going to have an h2 for the title of the article
We'll say this is balloon magic, like so. And then below that, a paragraph tag with
a loaded Lauren Ibsen. Now, I'm just going to copy and paste this Lauren Ibsen. So let
me copy it and paste it right here. But as well, a little tip, if you want to just generate
some Lauren Ibsen in VS Code, you can type Lauren and then how many words you want, for
example, 20, and then hit tab, and it generates 20 words of Lauren Ibsen. All right. So anyway
that's the first article pretty much done there. So this one is going to be the featured
article, so let's give this a class. And that class is going to be featured, like so. All
right then, so now we can move on to the next articles. I'm going to do another article
tag down here. And then inside here, we're going to have pretty much the same thing
So we need an image tag, first of all, so let's do that. And tell you what, for this
one, we'll just use the same image. So this one, let's say, should be 1.8. So I'm going
to copy that source and paste it in here, and we'll just say article image, like so
for the alt tag. Now, ideally, it would be a different image, but I only have three
so it doesn't really matter. And then below the image, we again want a div for the text
content. Now, this time, because it's not the featured article, I don't want it to be
an H2, I want it to be an H3. So let's do an H3 there, and again, this is going to be
Balloon Magic, and then down here, we'll do a paragraph tag. And I'm just going to say
Lauren Twain to generate some Lauren Ipsen for this. And then down here, in fact, I think
that's pretty much it, yes? So we'll just copy this article now, and let's paste it
here, and change this to 2. We'll also change the title from Balloon Magic to Road to Freedom
like so. And then below that article, I'm going to paste in another one, and we'll change
this to 3, and also change the title to The Queer Blue, like so. All right then, so now
we have those three articles. In fact, four articles. We have the featured one up here
and the other three down below. And that is pretty much it for the template. So if
you save this now, and preview over here in the browser, it looks tripe, but at least
you can see we have all of those articles. So the next thing to do is create a grid using
this main site right here, and this class, Grid Container, in the CSS
So then let's start by just styling the header, first of all, the stuff at the top of the
page, because that's just this thing. And like I said before, it's got nothing to do with CSS Grid Disk, but we'll make it look nice anyway. So we'll give this a max width
of 1,200 pixels, and we'll give it a margin of 40 pixels, top and bottom, also left and
right, since it's in a central column of 1,200 pixels in the middle of the screen. And the
border bottom is going to be 1 pixel solid, and then hash, and it's going to be BBC7C7
by itself. And this gives us kind of like a lightish green color. I'm going to save
that so we can preview it, and we can just about see this border at the bottom. So that's
the header done. So now we can move on to the Grid Container
So, say grid-container, and we need to display this as grid, first of all, make it a grid
so display grid. And then below that, I'm going to do the columns. Now we want three
columns in total, because for the three bottom articles, they need to go in three individual
columns, all of equal width. So we'll say grid-template-columns, and each one is going
to be one fraction, so they're all the same width. One fraction, one fraction, one fraction
Now also, I'm going to apply a grid gap between each column, and that's going to be 60 pixels
And when we use gap, that's in the column direction, so a gap between the columns, but
also between rows as well. And then also, like the header, we want to give this a match
width of 100, or rather 1,200 pixels, like so, and we'll say the margin is 20 pixels
at the bottom this time, also left and right. So let me save that now, and let's preview
this. Alright, so looking a bit strange at the minute. It goes way over here. So we have
these three columns, but it's taken up way too much room, right? Why is it doing that
Well, remember, the content itself kind of dictates either the height of rows, or the
width of columns. However, since we gave this a match width of 100, or rather 1,200
pixels, what we can do is say, look, I don't want the images to be more than 100% in width
of the column that they've been assigned to. So what I could do is come down here and say
article image, like so, and also article.features image, like so. There we go. So we're grabbing
both of those images, and I'm going to say the width of those images would be 100%, and
that means that now they're going to take up 100% width of the column that they've been
assigned to. So now if we look at this, we can see they're no bigger than the columns
alright? Cool. So I'm also going to give each of the images a border, which is 4 pixels
solid, and it's going to be white, like so, and a border radius, the stuff in the columns
So border, I can radius, and that's going to be 8 pixels. Save that and preview. Alright
looking pretty nice. Cool. Okay, so we have these articles, but remember, it was the last
three that I wanted to display, like this here, and what we're doing is displaying the
first three that way. Now the first one should span the entire width of the grid, so three
columns, and then automatically, this will be assigned a column underneath, this a column
underneath, and this a column underneath. So let's work on this one right here, so the
featured article. So I'm going to place this right here, article.featured, like so, and
inside here, I'm going to say grid-column. Remember, this is how we assign specific columns
to items, and all I want to do is say span three. I don't have to set the starting point
because automatically, it's the first one in the grid, and it's going to take up that
original default position at the start of the grid. So that's all I need to do. I need
to say span three to take up all three columns in width. So let me save this, and preview
and we can see, okay, it does take up the full width, and then automatically, these
go underneath to the next row, and they all take up one column in width. So that's looking
pretty good. But I also said that I wanted this right here, this article, to display
a grid as well, so this itself is a grid, so that we can have two columns, one on the
left for the image, and one on the right for the text. So let's try doing that now. So
to make this a grid, again, I have to say display grid like so, because at the minute
it's a grid item, but it can also be a grid as well, so it has columns inside it, and
we need to specify those columns as well. So grid, template, column, like so. And by
the way, when we have a grid, within a grid like this, we call it a nested grid, okay
because we have the main grid right here, of which this is a grid item, but also this
is displayed as a grid, so this is a nested grid. All right, so the grid, template, column
are going to be one fraction on the left, and one fraction on the right, so two columns
is equal width. We also want a grid gap, so I'm going to say gap is 60 pixels, and I'm
also going to use a line item. In fact, we'll come to that in a minute, just so we can see
what this looks like before we do that. All right, so it looks a bit better. We have the
image on the left, and the text on the right, but I was just about to use a line item, and
then set it to be center, so that vertically, in the world, the content sits in the center
So rather than this being at the top over here, it would be in the center right here
So let's do that. We'll say align items, and set that to be center, like so, save it and
preview, and that to me looks a little bit better. All right, so just a couple more simple
styles to finish this off. A border bottom, which is going to be one pixel, solid, and
then it's going to be BB, C7, C7, like so, save that, and now we can see that border
but we need a bit of padding as well, so we'll say padding bottom is going to be 40 pixels
and I think that should be just about enough. Awesome. Okay, so the only thing I'd like to do is just apply a bit of margin to the paragraph
tags, and also to the H3, so these things down here. What I'm going to do is, at the
very bottom, say article P, and also article H3, like so, I'm going to apply a bit of margin
to those. Margin is going to be 20 pixels, 10 pixels, so 20 up and down, 10 left and
right, save it, and okay, yeah, that looks a little bit better. Cool
So, that's pretty much it for the desktop version. Next up, I want to make it so that
when we go to small screen sizes, it doesn't look pamped, because at the minute, it's all
rather squash. So, we need to do some media queries at different screen widths, and the
first width I'm going to do is around about 900 megapixels, so if I just inspect over
here, so we can see the width of the browser up here, it's going to show up here as I move
this, you can see that, yeah? So, this at the minute is around about 1090 pixels. When
I get to 980 pixels, roughly here, it starts to look a little bit squash. This is the point
that I want to start changing how the grid looks. Now, normally, when I'm mocking up a website, I would adopt a mobile-first approach, meaning
I would do all my styles for mobile, size screens, this size, first of all, and then
work my way upwards, okay? However, for the sake of this series, because I want the focus
to be on CSS Grid, and we're kind of making the desktop version first and keeping the
focus on CSS Grid, we're going to work the opposite way. So, I'm going to work from desktop
to mobile, but like I said, it's probably best practice to go from mobile and then to desktop
All right. So, let's cross this off and let's start work on the mobile styles. So, first
of all, I'm going to come down here and just add in a little comment, say these are the
responsive styles. We need a media query, so app media, it's going to be for screen
for screen, and then the condition, which is going to be max-width, and the max-width
is going to be 980 pixels. So, basically, we're targeting any screen which is 980 pixels
or less. All right? So, remember, when we inspected the element over here, and we got
about 980 pixels roughly here, then at this point, I'm done. We're going to go with the
new styles that we apply here, and we're basically just going to override these ones up here
where we create new ones, okay? Now, all I want to do, actually, is target the article files themselves. So, each one
will be this, this, this, and this, and I just want to make them span three columns
so they're all four widths in essence. So, what I'm going to do is say article, and then
open that up, and then I'll say grid-column and span three, okay? So, if I save this now
notice above 980 pixels, they're all in one column each. This one's in three columns
but that's the case on all screen sizes, but when we get to 980 pixels, the bottom three
as well, they're all four widths, so we can see three four width articles. The problem
is, the images are four widths, and the text is four widths, and that just looks a bit
daft, and I would prefer it if we had something a bit more like this at the top. So, let's
go back over here, and what we can do is we can display all of these as grid, much like
we did for the featured article up here, if we go to the featured one, we set that
to display as grid, and then we gave grid-template-columns a value of one fraction, one fraction, and
also a gap of 60 pixels, and we aligned the items to the center. We're going to do pretty
much the same now for each one of those other articles, so let me, in fact, just copy those
properties, and get rid of this, paste them in, like so, and now each one of those other
articles should look pretty much the same. All right, so now all of the articles look
pretty nice as we go down. All right, cool. So, that will do for this screen size, but
when we get a bit smaller, to around about 760 pixels, or thereabouts, off of here, I
want to change the look again, so what I'm going to do is another media query, so app
media, screen, and max-width, this time is 760 pixels, and in that case, I want to take
the article, and also the article for the class of featured, because we want to override
those rules as well, and we want to set the display to be blocked, so no longer grid
and that means that the text and the image are not going to sit side by side for small
screens, because that looks a bit daft, but instead, they're going to sit one on top of
the other, so the image first, then the text underneath, okay? So, display blocked, and
also, we'll give each one a margin of zero, top and bottom 20 pixels, left and right
just to bring them away from the edges. So, let's see if this works. I'm going to go down
to the smaller screen, and yep, there we go, that looks pretty nice, okay? So, for small
screens, they're all stacking on top of each other. When we get a little larger, then the
still stack on top of each other, but the text and the image go side by side, and for
desktop screens, we have these three columns with one article in each column, all right
So, my friends, that is the first layout pretty much done, all right? So, I know it's not
a fully polished layout, and we're not going to get any design in-house for this, but this
is just basically a skeleton layout that you can use and adapt for your own website, and
I'm sure you will make them look better. So, that's the first one out of the way. Next
up, we're going to go ahead and design what's been known as the Holy Grail layout