Learn CSS Grid in 20 Minutes
Web Dev Simplified
youtube· 18:34standard
1.Introduction to CSS Grid
0:00 / 0:23This chapter introduces CSS Grid, explaining what it is, when to use it, and outlines the topics to be covered in the tutorial, including syntax and practical examples.
- CSS Grid
- Web Dev Simplified
What's inside this course
- 0:00
1. Introduction to CSS Grid
This chapter introduces CSS Grid, explaining what it is, when to use it, and outlines the topics to be covered in the tutorial, including syntax and practical examples.
- 0:23
2. Grid vs Flexbox Terminology
This section compares CSS Grid to Flexbox, highlighting Grid's two-dimensional layout capabilities. It also introduces fundamental Grid terminology such as grid container, grid items, grid gaps, and grid lines.
- 1:57
3. Create a Basic Grid Layout
This chapter demonstrates how to set up a basic CSS Grid layout. It covers creating a grid container, adding grid items, and using `display: grid` along with `grid-template-columns` to define column sizes.
- 5:02
4. Define Grid Columns with FR Units
Learn how to use the fractional unit (FR) to create flexible column sizes in CSS Grid. This allows columns to distribute available space proportionally, similar to `flex-grow` in Flexbox.
- 7:20
5. Use Repeat for Grid Columns
This chapter introduces the `repeat()` function for `grid-template-columns`, allowing for concise definition of multiple columns with the same size. It simplifies creating symmetrical grid structures.
- 8:39
6. Define Grid Rows with Auto Rows
Explore how to define grid rows using `grid-template-rows` for fixed sizes and `grid-auto-rows` for automatically generated rows. This helps manage row sizing when the number of rows is dynamic.
- 10:09
7. Control Row Sizing with Minmax
This chapter demonstrates how to use the `minmax()` function with `grid-auto-rows` to ensure grid items have a minimum height while allowing them to grow to accommodate content. This prevents content overflow.
- 12:29
8. Add Gaps Between Grid Items
Learn how to add spacing between grid items using `grid-row-gap`, `grid-column-gap`, and the shorthand `grid-gap` property. This improves the visual separation and readability of grid layouts.
- 14:26
9. Position Items with Grid Template Areas
Discover `grid-template-areas` for defining named areas within the grid and assigning grid items to these areas. This method is useful for creating complex, responsive layouts by naming sections of the grid.
- 17:32
10. Span Grid Items Across Tracks
This chapter explains how to make grid items span multiple columns or rows using `grid-column-start`, `grid-column-end`, `grid-row-start`, and `grid-row-end`. It also introduces the `span` keyword for simpler spanning.
Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →
Transcript (572 segments)
0:00Hello everyone. My name is Kyle and this
0:02is Web Dev Simplified. We make the web
0:05easy to understand and accessible for
0:07everyone. In this video, I'm going to be
0:09discussing everything you need to know
0:10about CSS Grid. I'm going to start by
0:13talking about what CSS Grid is, go into
0:15when you should use it, and then finish
0:17up with going over all of the syntax for
0:19CSS Grid. So, let's get started now.
0:24The easiest way to get started with CSS
0:26Grid is to compare it to what it's most
0:27similar to, which is Flexbox. Flexbox,
0:30I've already created an entire video on.
0:33So, if you haven't seen that, make sure
0:34you check it out so that you can
0:35continue watching this video.
0:37So, Flexbox, essentially, is just a way
0:39to lay out things in one dimension so
0:42that they're flexible and they can
0:43change their size dynamically based on
0:45the content inside of the Flexbox
0:47container.
0:48Grid is exactly the same in that it
0:50allows you to lay out items flexibly
0:52inside of the container, but it allows
0:54you to do it not in just one dimension,
0:55but in two dimensions. It also allows
0:58you to line up items within those
0:59dimensions both vertically and
1:01horizontally, just like Flexbox does.
1:03And it's essentially Flexbox, but for
1:05two dimensions instead of just one
1:07dimension. It's incredibly powerful, but
1:09difficult to wrap your head around due
1:11to the complexity of the layout
1:12mechanisms. So, we need to talk about a
1:14little bit of terminology first before
1:16we can continue further.
1:18The first thing that I want to mention
1:20is that you have a grid container, just
1:21like you do in Flexbox. This container
1:24is the object that wraps all of your
1:25different grid items. So, in this
1:26picture, the container is the square
1:29that wraps all the different objects
1:30inside of this grid.
1:32Then, inside of that grid container, we
1:34have different grid items, which are all
1:36these multicolored boxes of different
1:38sizes. They're all items inside of the
1:40grid. They just have different sizes and
1:42take up different positions inside of
1:44the grid. We then have the gaps between
1:46our items, which are called grid gaps.
1:49And then, we also have our lines for our
1:52grid tracks, which are these dividers
1:54that you see between all of our
1:55different rows and columns that our grid
1:58is composed of.
2:00So, now that we have that basic
2:01terminology out of the way, let's get
2:02started with creating our own grid. In
2:05here, I have Visual Studio Code open
2:06with a project which has some basic
2:08background styles and nothing inside of
2:10it. Let's open that with Live Server.
2:13As you can see, we just have this dark
2:14background and we can get started by
2:15creating a container to wrap our grid
2:17items in.
2:18So, let's create a div
2:20and give it a class here of grid
2:22container.
2:24And inside of that, we're going to want
2:25to put our different grid items. So,
2:27we'll just create different grid items,
2:29give them a class of grid item, and
2:31we'll also give them a class of which
2:33number they are so we can easily
2:34distinguish them. So, we have grid item
2:36one,
2:37let's do grid item two,
2:39and grid item three. And if you save
2:41that, you'll see that we now have these
2:42different items showing up on our screen
2:44so they're easy for us to visualize. We
2:46have no styles being applied to them
2:47other than the visual styles themselves.
2:50So, to get started and create a grid, we
2:52need to open up our styles.css and we
2:54need to display grid for our grid
2:56container. So, we select our grid
2:58container
3:00and in here, we just put display grid.
3:03If you save that, you'll notice
3:04absolutely nothing changes and that's
3:06just fine. Grid by itself doesn't define
3:09any rows or columns for us to work with.
3:11So, by default, it just looks exactly
3:13the same as normal divs inside of a
3:15container.
3:17What you need to do to make grid become
3:18an actual grid is to to find specific
3:21columns or rows for your grid.
3:24So, to do this, you'll use grid template
3:27and then you'll say columns if you want
3:29to define your columns. And in here, you
3:31put a list of all the different column
3:33sizes you want. You can use percentages,
3:35pixels, ems, rems, whatever you want to
3:38define your sizes. So, for example, if
3:40we wanted to have a 200 pixel column and
3:43a 100 pixel column,
3:44we save that, you see we have a 200
3:46pixel column on the left and a 100 pixel
3:48column on the right. And then, our grid
3:50wraps to the next row where it has
3:52another 200-pixel column. So, our grid
3:54is essentially two columns wide, and it
3:56has a 200-pixel column and a 100-pixel
3:58column.
4:00But, what if we wanted our columns to
4:02flexibly size themselves based on the
4:04items inside of them?
4:05That's where we use what's called the
4:06fraction unit. So, instead of 100-pixel
4:09column, let's say we wanted this to be
4:11one fraction of our size, and instead of
4:14200 pixels, we wanted this to be two
4:15fractions.
4:17This works exactly as Flexbox does for
4:19flex grow, in that the two FR is going
4:22to be the same as a flex grow of two,
4:24and one FR will be the same as flex grow
4:26of one. So, essentially, two FR will be
4:29twice as much space taken up as one FR.
4:32And if you save that, you see that our
4:34items on the left here in our first
4:35column are twice as large as the items
4:37in our second column, and that's because
4:39of these FR units that we defined.
4:41Another thing that you can do with grid
4:43when defining your actual columns is to
4:45use a repeat. So, if we wanted to have,
4:47for example, four columns that were all
4:49100 pixels wide, instead of writing out
4:51100 pixels four times, we can just use
4:54the simple repeat command.
4:57And inside of the repeat, we just put
4:59how many times we want it to repeat, and
5:01we put how large we want that size to
5:03be.
5:04If we save that, we now get four
5:05100-pixel wide columns. And if we go in
5:07here and add a few extra grid items,
5:11you'll see that we have four 100-pixel
5:13wide columns, and this one wraps onto
5:15the first column when we get to the
5:16fifth item.
5:18That's exactly how we want it.
5:20We can also do the same thing for our
5:21rows. So, we can do grid template rows
5:24instead of columns, and let's say we
5:26want to have
5:27a 200-pixel tall
5:29row for our first row, and then we want
5:31our second row to be 150 pixels tall.
5:34If you save that, we now have a
5:35200-pixel row for our first row, and 150
5:38for our second row.
5:39But, if you don't know how large your
5:42grid is going to be, so you don't know
5:43how many rows it'll be, you can use
5:45what's called grid auto rows, and this
5:49will determine the size of all rows that
5:51get added after our template rows. So
5:53for example, we can put in that we want
5:55all of our rows to be 150 pixels tall.
5:58So if we delete this template rows here
6:01and save it, now all of the rows that
6:03aren't defined, which in our case we
6:05have no defined rows, so all of our rows
6:07will be 150 pixels tall.
6:09If we add back in that grid template
6:12rows and we make our first row 200
6:14pixels, we don't define our second row,
6:16it'll just default to this auto row of
6:18150 and as you can see our first row is
6:20200 and our second row is 150. Let's
6:23change our columns back here
6:25to be 200 pixels
6:27and 250 pixels just so it's easier for
6:30us to see. We'll get rid of all these
6:32things for our rows
6:33and save that and now we have our nice
6:35two column layout and let's add some
6:37content inside of our different grid
6:38items to see how they scale with
6:40different size content. Inside of our
6:42first one here, let's just add a little
6:44bit of text. We'll say 50 words here.
6:47Inside of our second one,
6:49we'll just add 25. If you save that,
6:52you see that this first grid item is
6:54much longer than our second grid item
6:57and our second grid item just grows to
6:59fill that amount of space, which is
7:00exactly what we want. But let's say
7:03inside of our styles here,
7:04we'll add our grid auto rows back in and
7:07let's say we had defined our rows, we
7:08want them to be 150 pixels tall. If you
7:11save that, you see that our text just
7:13overflows outside of our grid item,
7:15which is not what we want. We want our
7:17grid item to grow to that size but be
7:19150 pixels minimum. So we can use what's
7:22called minmax to define what we want our
7:25minimum size to be and our maximum size
7:27for our content to be. So we want our
7:29minimum row size to be 150 and our
7:32maximum to be auto, which means it'll
7:34just fill the amount of space it needs
7:36to put its content. If you save that,
7:38you now see that our first row fills the
7:40amount of space it needs to put that
7:41content And our other rows are that 150
7:44pixels tall since they have no content
7:46to fill the extra space.
7:48And that's exactly what we want.
7:50Now, let's remove that content from here
7:51so we can see our view a little bit
7:52better.
7:54And there we go. We got our rows back
7:56exactly like we want.
7:57And now we can talk about spacing our
7:59rows and columns apart from each other.
8:01We can do this with the grid gap
8:03property. So, we have the grid row gap,
8:06which determines the space between our
8:07rows. Let's, for example, put in here 20
8:09pixels.
8:10If you save that, we now have 20 pixels
8:12between all of our different rows inside
8:14of our grid.
8:15We have the exact same property for
8:17column. So, for example, we can put 10
8:20pixels between all of our columns, and
8:21you'll see we now have 10 pixels between
8:22our columns.
8:24And if you want the same value for both
8:25the row and column, you can just use the
8:27grid gap property, which sets both the
8:29column and row gap to be 20 pixels in
8:32this case. And now you see we have 20
8:34pixels between all of our different grid
8:35items on the rows and columns.
8:38And that's, for the most part, all you
8:40need to know about sizing your different
8:42columns, your different rows, and your
8:43gaps. There's only one other way in
8:46which you can lay out your columns and
8:47rows, and that's using grid template
8:49area.
8:52Grid template areas allows you to create
8:54different strings for the areas that you
8:56want your different code to take up. So,
8:58in our case, let's say we want to have a
9:00header
9:01and another header.
9:03So, we want our header to take up the
9:04first two rows, just like this.
9:06And then we have one of our grid items,
9:08let's say grid item one in this case. We
9:12can give it a grid area
9:13of header.
9:15And now if you save that, you see that
9:17this template area, our entire first
9:19row, is going to take up the space of
9:20this header.
9:22We can even define further rows after
9:24that. So, let's say we want our next row
9:26to be
9:28sidebar
9:29and then content
9:31and then again sidebar
9:34content.
9:36So, we can use our
9:37grid item
9:39two here.
9:40We can set this to be a sidebar for the
9:42grid area.
9:46Let's do the same exact thing
9:48for our grid item three, except for
9:51we're going to make it the content.
9:53And now,
9:55if we save this,
9:56you'll see that we have our sidebar on
9:58the left side here and our content on
9:59the right side here. So, these grid
10:01template areas allow us to name our
10:03different items based on an area and
10:06then position it in our rows using the
10:08template concept. So, we lay the rows
10:12the areas that we want for each row. So,
10:14for example, column one will be header,
10:15column two will also be header, so it'll
10:17span both of those columns. Our sidebar
10:20will be in column one for both of row
10:22two and row three and so on. So, it'll
10:25follow the template columns and rows we
10:27have set up and it'll put these objects
10:29in the different areas that we've
10:30defined.
10:32This is great for when you want to
10:33reposition elements on different size
10:35screens or shrink or grow elements based
10:37on your screen size, but it's not
10:39something that I use very often when I'm
10:40creating grids cuz I prefer to style my
10:43elements using grid column and grid row
10:46on the elements, which we can talk about
10:47now. So, let's remove these template
10:49areas
10:50and these areas for our different items.
10:52And we can do the exact same thing of
10:54spanning across our different columns by
10:57using grid column
10:59start to determine which column the grid
11:02item should start in. So, in our case,
11:04we want it to start at the very first
11:05column, so we'll just put one in here.
11:07And then, we can use grid column end
11:11to determine where we want this grid
11:12column to end. And you may think that we
11:14want to put two in here because we want
11:16it to end in the second column, but the
11:18way that the columns work and the rows
11:19work in our grid is a bit different. On
11:22the right here, you see that we have our
11:23very starting column, which is on the
11:25far left. This is column one.
11:27Our second column is actually this break
11:30between column one and column two. So,
11:33our second line is right here in between
11:35grid item two and three.
11:37And then column three is actually the
11:39line at the very end of our page because
11:41each column that we have, each section,
11:44has a start and an end. So, if we
11:47started at one and ended at two, we
11:49would just be covering up this first
11:50section. And if we want to start at one
11:52and go to the end of the line, we'd have
11:54to use a column end of three here.
11:57If you save that, you see that now we
11:59still span the full header, which is
12:00exactly what we want. If we were to
12:02change this back to two like we had
12:04mentioned earlier, you see that it only
12:05covers this first grid area.
12:08Another way to do this is to use -1,
12:10which will span all the way to the very
12:12end of the column.
12:13And there we go, you see that it goes
12:14all the way across the row since -1
12:16corresponds to the farthest away column
12:18on the right side of the page.
12:20You can even shorten this further
12:22by using the grid
12:23column property,
12:25putting our start at the beginning,
12:27using a slash, and then putting our end
12:29at the end here.
12:31If you save that, we get the same exact
12:32thing as using grid column start and end
12:34separately.
12:36We can do the same thing again for our
12:37rows. So, for grid item two,
12:40let's use the grid row start.
12:43And we want to start in the second row
12:44here, so two.
12:46And then we want to use grid row end.
12:50And we want to end in the fourth row,
12:52just like I mentioned earlier. If we end
12:54in the third row, it'll only fill one
12:55slot. We want to go to the fourth row so
12:57that it'll fill two slots.
12:59And we want to do that for both of our
13:00grid items here.
13:02If we save that, you see that we now get
13:04that same layout we created with the
13:05template areas. This is incredibly
13:07useful for creating layouts that span
13:09different sizes of our column.
13:11Also, you can use the span property. So,
13:14if we wanted this to span two columns,
13:17and we could just say span two. If you
13:20save that, it'll now take up two column
13:22widths.
13:22Same thing down here with our grid rows.
13:24We could change this to to span two.
13:27And now it will just take up two rows.
13:30And same thing down here.
13:33There you go. Now our
13:35properties, our items, are spanning two
13:36rows. We could even change this to be
13:38span three, for example. And now this
13:40grid item three is spanning three rows.
13:42Or even just span one, which is the
13:44default, which means that it's only
13:45going to take up one row space.
13:48Same thing with the column.
13:49Span one is the default, which means
13:51that it just takes up one column and one
13:53row by default.
13:55So now let's remove all these different
13:56grid column layouts here.
13:58That way we have our grid back to how we
13:59want it to be. And now we can start to
14:01talk about how we can align our grid
14:03container and our grid items inside of
14:06our container.
14:07This works very similarly to how flexbox
14:09works for aligning items using align
14:11items, justify items. So in our case,
14:14there's two types. We have the items and
14:16the content version of align and
14:17justify. So there's align items and
14:20justify items, which is how we layout
14:22the different grid items inside of our
14:23container. And then there's justify
14:25content and align content, which is how
14:27we layout our actual grid container
14:29inside of the container that that's
14:31inside of.
14:32So let me show you an example by
14:34justifying our container and aligning
14:36our container.
14:37So we'll use justify content, which is
14:39what is going to contain our container
14:41and make it move around. And we'll just
14:43say center, for example, if we want our
14:44grid to be in the center on the
14:46horizontal axis. If you save it, you see
14:49that our grid is now in the center. And
14:50if we increase that, you see it a little
14:51bit easier that it's in the center of
14:53our screen.
14:54We could change this to be in the start,
14:56for example.
14:57And notice how we don't use flex start.
14:59That's only for flexbox. In grid, we
15:00just use start.
15:02Or end, for example. And if we wanted to
15:04align our grid inside of our screen, we
15:06could use align content.
15:09And we can say center, for example. And
15:10we also need to give our grid a height,
15:12so it can align itself inside of that.
15:14So we'll just say the height should be
15:16100 view height, so it'll take up the
15:18full screen. And you now see that our
15:19grid is centered vertically and it's
15:22right lined for the horizontal. So, now
15:25we can do all the different types of
15:26alignments that we could do with a
15:27flexbox inside of here. So, we could do
15:29stretch, for example, and it'll stretch
15:31our grid to fill the full size.
15:33We do the same thing for justify, we can
15:35make it stretch as well, but since our
15:36grid items can't actually grow, this
15:38won't change anything.
15:40We can either do like space around, for
15:42example, space our items around like
15:44that, and so on for all the different
15:45types of justifying of our content that
15:47we want to do.
15:48Next, we can look at justifying the
15:50items inside of our container. So, let's
15:52remove all of the content justifications
15:54we have,
15:55save it so we know what we're starting
15:56with. And now, if we wanted to justify
15:59the items inside of our container, we
16:01could say that we want our items to be
16:03centered inside of their different rows.
16:05And as you can see, now the items are
16:07perfectly centered inside of their
16:08corresponding columns. And if we wanted
16:10to center them in the row,
16:12we would use align-items of center. And
16:14this will now center them inside of
16:16their different rows,
16:17which is perfect. We can also change
16:19this to be start, for example,
16:22and it'll be at the top of the row,
16:24end for the bottom of the row, and so
16:26on. And we can also do the same thing
16:28with justify, for example.
16:31And by default, these are both set to
16:32stretch, which is why you see that our
16:34sizes on our things look like this when
16:36we have no justifying of our items.
16:39And these properties can be overridden
16:41on the different elements inside of our
16:42grid.
16:43So, let's say we wanted to take our
16:45first
16:46grid item,
16:48grid item one,
16:49and we wanted this one to be aligned at
16:51the top of the row. We could just say
16:53align-self
16:55start.
16:57If we say that, you now see that this is
16:58aligned at the top of the row, and
17:00everything else is align stretch. We
17:02could also override justify, so we could
17:04say justify-self, and we want it to be
17:06in the center.
17:07And there we go, you now see that it's
17:08aligned itself in the center
17:09horizontally.
17:11And that's how we can override any of
17:13the different justify properties or the
17:14align properties on the individual grid
17:17items and set them on our container
17:19using justify items and align items.
17:21This whole aligning and justifying of
17:23containers and items works almost
17:25exactly the same as it does in flexbox.
17:27So again, if you haven't checked out my
17:28flexbox tutorial, make sure you check
17:30that out for more in-depth explanations
17:32on these justify and align properties.
17:34And that's everything you need to know
17:35in order to get started creating grids
17:37using CSS.
17:38It's very similar to how flexbox works,
17:41but it allows you a lot more in the way
17:42of laying out your elements due to it
17:44being in a 2D nature as opposed to a
17:46one-dimensional nature.
17:48Flexbox and grid were designed so that
17:49they would work amazingly together, and
17:51using flexbox containers inside of your
17:54different grid items is one of the best
17:56ways to lay out a site in my opinion.
17:58And luckily support for grid and flexbox
18:01is nearing almost perfect in all modern
18:03browsers, so you can use this on modern
18:05sites and not have to worry too much
18:07about supporting older browsers unless
18:09you're trying to focus on Internet
18:10Explorer 11, for example, which does not
18:12support grid fully. I know this was a
18:14really quick overview of everything that
18:16you can do in grid, so if you're
18:17confused with anything or want further
18:19clarifications, just let me know down in
18:21the comments below and I'll make sure to
18:23get to you with an answer to any of your
18:24questions.
18:25Thank you guys very much for watching
18:27this video, and if you did enjoy it,
18:28please make sure to leave me a like and
18:30subscribe down below for more tutorials
18:32in the future. Thank you guys very much
18:34for watching.