Build 3 responsive CSS grid examples to master the basics of this powerful layout system. https://github.com/fireship-io/224-animated-css-grid

Full Tutorial: https://fireship.io/lessons/three-responsive-css-grid-layouts/

1. Responsive 12-column bootstrap replacement. 
2. Mosaic photo gallery.
3. Staggered animation grid.

Featuring special guest Bob Ross. 

#css #grid #tutorial

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:20:15.923Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c303db72-c5a7-4127-b4c2-357fd1af7fec
f36eaad696bd1ed50dced659f2d9a83355d324e10bd5464f6bb2724d6e48181b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, you'll learn the basics of CSS Grid by building 3 different grid layouts from scratch.
The first example is a responsive 12 column grid.
It replaces most of the use cases that you'd find in a grid system like Twitter Bootstrap, but it does so with only 3 lines of code and removes the need for all this crazy markup HTML.
Next, we'll build a responsive photo gallery.
And 3rd, we'll build an explicit grid that has this fancy, staggered intro animation.
By by the end of this video, you should know enough about grid to start putting it to use in your own projects.
If you're new here, like and subscribe, and feel free to grab your mouse and keyboard to code along with us.
When you start, Just have a good feeling and be happy and and love with life and the world and sit down and begin playing.
I'd like to start off by sharing my own experience with Grid.
Because on Fireship IO, I was previously using a flexbox based system, like you would find in Bootstrap and many other CSS frameworks.
Now, there's nothing wrong with using a third party solution, but when you use Grid, you don't have to add any additional CSS to your bundle size.
The grid system just works natively in the browser.
But, the much more important benefit was how much it simplified the codebase.
My HTML markup had a bunch of columns, each with its own collection of classes to make that column responsive.
After moving to CSS Grid, I was able to remove all these classes and implement my own grid system with just three lines of code.
And on top of that, beautiful designs that you would normally only find in a magazine are much easier to implement with Grid, because the system itself is inspired by print based grids.
Now, I should warn you that grid is pretty weird to learn at first.
So, let's jump into some examples and understand what every line of code is doing.
You can follow along by opening your editor and creating an HTML all in CSS file, or you can clone the project from GitHub and you'll see that each grid is broken down into its own HTML and CSS files.
This first grid building is basically an infinite set of responsive columns.
And that's really useful if you have something like a feed of cards, like the lesson feed on Fireship IO.
And a grid like this, we'll also replace many of the use cases for something like Twitter Bootstrap Grid.
Go ahead and open an HTML file in Versus Code, then can start typing HTML to autocomplete the boilerplate code.
Next, I'm going to go into the head of the document, add a style tag, and then import our Base CSS as well as our basic grid for this example.
The base CSS file is just something that I'm going to share across all the examples.
If we open that file, you'll notice that it has a card class that defines a flex box that aligns its content in the center.
None of this code is actually required for your grid to work, it's just there to make things look nice, so feel free to copy it from the main repo.
Now going back to our HTML, we'll go into the body and set up a section that will serve as our main grid container.
Then, all of the immediate children inside of this container are known as grid items.
Now, for this demo, I'm adding 12 children to the grid, but I'm assuming the content inside the grid is dynamic.
Meaning, we might have 3 items in there, 50 items, or whatever.
So what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size.
The first step is to set display grid on the container and You'll notice right now, everything is just stacked up in a single column.
Let's start by giving our children a little bit of spacing.
We can do that with the gap property Instead of setting margins on the children, that will guarantee that we always have 1 REM of spacing between the items both horizontally and vertically.
Now, Now, one way to create columns is to use the grid template columns property.
Let's start by creating an explicit grid, or a grid that has all of its columns defined in advance.
Now, since we're talking about columns, think about the width of the grid.
1 f r or 1 fractional unit represents one part of the available space.
Currently, we have 1 column, so 1 f r is a 100% of the available space.
We can add another column by simply adding another f r unit.
And now 1 f r equals 50% of the available space.
And we can keep doing this for as many columns as we need, or in our case, 12 columns.
The end result is an explicit grid that always has 12 columns.
But there's a few problems here.
First of all, this grid is not responsive and this code was really ugly.
Fortunately, CSS Grid has a helper function called repeat.
Instead of writing out each column manually, we can simply call repeat 12, and then pass in the unit that we want to repeat.
This code is identical to the code above, but much more concise and readable.
Now, currently in the demo, each column is too thin.
Let's look at how we can set a minimum width of 2 40 pixels.
We'll try again by repeating 12 columns, but this time use the min max function.
This is like saying make sure my columns don't go below 200 pixels in width, but allow them to expand as big as one fractional unit will allow.
What you'll notice is that our cards are no longer too skinny, but we now have Another problem.
They're overflowing on the horizontal axis.
So the question becomes, how do we make these columns break down into additional rows when there's no longer available space?
The answer is by creating an implicit grid.
When we call repeat, instead of repeating 12 times, we'll repeat with autofit and then use the same min max value you as before.
What autofit does is tell grid to calculate the number of rows and columns on the fly.
And now you can see that we have a truly responsive grid.
It only took 3 lines of code and no additional markup or classes in our HTML.
It's worth noting that there's also an autofill option.
The difference is subtle, but important.
Notice here in the demo how the The top autofill option is going to create additional columns when there becomes additional space, but autofit on the bottom will expand its children to take up all of the available space.
Now, Now, when you're working with Grid and things aren't going the way you expect, open up Firefox Dev Tools.
It has a really good grid and Flexbox inspector.
And, you can see here how it allows me to visualize the lines and tracks on the grid.
Now, it's time to move on to example number 2.
A responsive mosaic photo gallery.
What you'll notice about this example, is that some of the photos are bigger, some are taller, and some are wider.
And, they also reposition themselves gracefully when the viewport size changes.
Let's start by going into the HTML and setting up a grid container.
Inside the container, we have 12 divs like we did in the previous example, but each div has a photo URL as its background.
And, by the way, these are free to use photos from Unsplash.
Now if we go into the CSS, we'll use the code from the previous example as our starting point, but you'll notice the rows in the grid are very short.
That's because they're being automatically sized to the text content in the children.
Now, when you have an implicit grid like this, it can be useful to set the size of the row.
If we want all of our rows to be exactly 240 pixels tall, we can set the grid auto rows property to that value.
And now each automatically created row will be fixed to that height.
Now our goal is to change the sizing of individual grid items.
Let's create a class called card tall.
Any item with this class should span across multiple rows vertically.
We can do that with the grid row property and then span2 will tell it to span across 2 rows from its starting position.
We can use a slash to also specify its ending point, which in this case can be figured out automatically by the grid algorithm.
So, the grid row property is like saying start here slash end here.
It makes more sense when you look at your grid in Firefox and display the grid line numbers.
If we look at the first photo, you can see it starts at column 1 row 1, then ends at column 2 row 2.
If we want to make this photo taller, we can do so explicitly with the grid row property.
Like saying start at horizontal line 1 and end at horizontal line 4.
And now you can see that photo spans across 3 rows and everything else was repositioned accordingly.
But, since we don't want to use the line numbers explicitly, we'll use span 2 to say start wherever, span 2 rows, and then automatically end wherever.
So that's how we can make an item taller.
If we want to make an item wider, we can use the grid column property and we can implement it with the exact same value.
And now, we can go into our HTML and start applying these classes to the items.
The end result is a responsive photo gallery, but there is one slight problem.
At smaller sizes, spanning 2 grid lines doesn't work very well.
Notice how the items on the right are way too skinny.
We can easily fix this by wrapping our classes in a media query.
This means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport.
And now things will look much better on small devices.
And that brings us to grid number 3.
It has this intro animation and notice how each A grid item comes in clockwise until it gets to the center.
You'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size.
Now, again, we have the same basic HTML structure, just a bunch of divs inside a grid.
We'll set the display to grid, give it a gap, but this time we're went to create an explicit grid using grid template areas.
This is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid.
Notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to l and then in the middle we're actually using emojis to represent the main content.
And A shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names.
Notice how he's using shapes to define the grid areas, making it extremely clear which part of the UI each grid area is for.
Now, once you have your grid template areas defined, you can set some sizing for the rows and columns.
In this example, the grid container has a fixed height, so we'll have each individual row take up exactly 25% of the height using the repeat function.
When it comes to our columns, we'll give the 1st column a fixed width, the 2 middle columns an auto property to automatically resize based on the viewport, and then the last column a fixed width of also 240.
Then the next step is to place the children in their appropriate grid area.
Now, because I have all the children laid out in a logical order, I'm going to use nth child to select them, but you could definitely use your own custom class names here as well.
The important thing to notice is that we're applying grid area a to this element.
No matter where it sits in the container, it will take up that grid template area you defined above.
Now, we'll repeat this process for every single area in the grid.
The end result is this grid with all children in the appropriate spots.
And now, how do we impress our friends with this fancy staggered intro animation?
Well, the first thing I'm going to do is set up a variable for the staggered delay.
This will allow us to change the timing without having to manually update the delay for all 13 elements.
Next, we're going to need a keyframes animation.
If you're not familiar with keyframes, they basically allow you to move from one set of properties to another.
From is the starting point, to is the ending point.
We want to start with an opacity of 0 or invisible, a scale of 0.3, and then we'll also rotate the color by a 180 degrees.
That's how I create that rainbow like color change when the items are animated in.
When the animation's complete, the opacity should be 1, the scale should be 1, and the hue rotate should be 0.
Now, CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation.
We can apply this animation to all the cards by setting it as the animation name.
Then, we'll also give it a duration of 700 milliseconds and a timing function of ease out.
Now, one last important point here is that we also need to set the animation fill mode to backwards.
This will set the elements to their first key frame value which, in our case, will be invisible.
Otherwise, the cards would be visible before the animation starts and that just wouldn't look right at all.
That takes care of the animation, but now we want to stagger it.
And We can do that by setting an animation delay on each individual element.
But, we want to do this in a smart way, so if we decide to change the delay, We don't have to update all 13 items.
To help us, I'm going to use the CSS calc function.
It can perform basic calculations on values.
For the first item, we'll say 1 times the stagger delay.
For the second item, we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items.
And And, there's still obviously a lot of code duplication here, but you could make this much more efficient by using something like Sass, where you can run a programmatic for loop.
And, that's basically all there is to it.
We now have this unique animated grid without any JavaScript or external CSS framework.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and make sure to grab a full source code on FireShip IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: Today, you'll learn the basics of CSS Grid by building 3 different grid layouts from scratch. The first example is a responsive 12 column grid. It replaces most of the use cases that you'd find in a grid system like Twitter Bootstrap, but it does so with only 3 lines of code and removes the need for all this crazy markup HTML. Next, we'll build a responsive photo gallery. And 3rd, we'll build an explicit grid that has this fancy, staggered intro animation.

By by the end of this video, you should know enough about grid to start putting it to use in your own projects. If you're new here, like and subscribe, and feel free to grab your mouse and keyboard to code along with us. When you start, Just have a good feeling and be happy and and love with life and the world and sit down and begin playing. I'd like to start off by sharing my own experience with Grid. Because on Fireship IO, I was previously using a flexbox based system, like you would find in Bootstrap and many other CSS frameworks.

Now, there's nothing wrong with using a third party solution, but when you use Grid, you don't have to add any additional CSS to your bundle size. The grid system just works natively in the browser. But, the much more important benefit was how much it simplified the codebase. My HTML markup had a bunch of columns, each with its own collection of classes to make that column responsive. After moving to CSS Grid, I was able to remove all these classes and implement my own grid system with just three lines of code.

And on top of that, beautiful designs that you would normally only find in a magazine are much easier to implement with Grid, because the system itself is inspired by print based grids. Now, I should warn you that grid is pretty weird to learn at first. So, let's jump into some examples and understand what every line of code is doing. You can follow along by opening your editor and creating an HTML all in CSS file, or you can clone the project from GitHub and you'll see that each grid is broken down into its own HTML and CSS files. This first grid building is basically an infinite set of responsive columns.

And that's really useful if you have something like a feed of cards, like the lesson feed on Fireship IO. And a grid like this, we'll also replace many of the use cases for something like Twitter Bootstrap Grid. Go ahead and open an HTML file in Versus Code, then can start typing HTML to autocomplete the boilerplate code. Next, I'm going to go into the head of the document, add a style tag, and then import our Base CSS as well as our basic grid for this example. The base CSS file is just something that I'm going to share across all the examples.

If we open that file, you'll notice that it has a card class that defines a flex box that aligns its content in the center. None of this code is actually required for your grid to work, it's just there to make things look nice, so feel free to copy it from the main repo. Now going back to our HTML, we'll go into the body and set up a section that will serve as our main grid container. Then, all of the immediate children inside of this container are known as grid items. Now, for this demo, I'm adding 12 children to the grid, but I'm assuming the content inside the grid is dynamic.

Meaning, we might have 3 items in there, 50 items, or whatever. So what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size. The first step is to set display grid on the container and You'll notice right now, everything is just stacked up in a single column. Let's start by giving our children a little bit of spacing. We can do that with the gap property Instead of setting margins on the children, that will guarantee that we always have 1 REM of spacing between the items both horizontally and vertically.

Now, Now, one way to create columns is to use the grid template columns property. Let's start by creating an explicit grid, or a grid that has all of its columns defined in advance. Now, since we're talking about columns, think about the width of the grid. 1 f r or 1 fractional unit represents one part of the available space. Currently, we have 1 column, so 1 f r is a 100% of the available space.

We can add another column by simply adding another f r unit. And now 1 f r equals 50% of the available space. And we can keep doing this for as many columns as we need, or in our case, 12 columns. The end result is an explicit grid that always has 12 columns. But there's a few problems here.

First of all, this grid is not responsive and this code was really ugly. Fortunately, CSS Grid has a helper function called repeat. Instead of writing out each column manually, we can simply call repeat 12, and then pass in the unit that we want to repeat. This code is identical to the code above, but much more concise and readable. Now, currently in the demo, each column is too thin.

Let's look at how we can set a minimum width of 2 40 pixels. We'll try again by repeating 12 columns, but this time use the min max function. This is like saying make sure my columns don't go below 200 pixels in width, but allow them to expand as big as one fractional unit will allow. What you'll notice is that our cards are no longer too skinny, but we now have Another problem. They're overflowing on the horizontal axis.

So the question becomes, how do we make these columns break down into additional rows when there's no longer available space? The answer is by creating an implicit grid. When we call repeat, instead of repeating 12 times, we'll repeat with autofit and then use the same min max value you as before. What autofit does is tell grid to calculate the number of rows and columns on the fly. And now you can see that we have a truly responsive grid.

It only took 3 lines of code and no additional markup or classes in our HTML. It's worth noting that there's also an autofill option. The difference is subtle, but important. Notice here in the demo how the The top autofill option is going to create additional columns when there becomes additional space, but autofit on the bottom will expand its children to take up all of the available space. Now, Now, when you're working with Grid and things aren't going the way you expect, open up Firefox Dev Tools.

It has a really good grid and Flexbox inspector. And, you can see here how it allows me to visualize the lines and tracks on the grid. Now, it's time to move on to example number 2. A responsive mosaic photo gallery. What you'll notice about this example, is that some of the photos are bigger, some are taller, and some are wider.

And, they also reposition themselves gracefully when the viewport size changes. Let's start by going into the HTML and setting up a grid container. Inside the container, we have 12 divs like we did in the previous example, but each div has a photo URL as its background. And, by the way, these are free to use photos from Unsplash. Now if we go into the CSS, we'll use the code from the previous example as our starting point, but you'll notice the rows in the grid are very short.

That's because they're being automatically sized to the text content in the children. Now, when you have an implicit grid like this, it can be useful to set the size of the row. If we want all of our rows to be exactly 240 pixels tall, we can set the grid auto rows property to that value. And now each automatically created row will be fixed to that height. Now our goal is to change the sizing of individual grid items.

Let's create a class called card tall. Any item with this class should span across multiple rows vertically. We can do that with the grid row property and then span2 will tell it to span across 2 rows from its starting position. We can use a slash to also specify its ending point, which in this case can be figured out automatically by the grid algorithm. So, the grid row property is like saying start here slash end here.

It makes more sense when you look at your grid in Firefox and display the grid line numbers. If we look at the first photo, you can see it starts at column 1 row 1, then ends at column 2 row 2. If we want to make this photo taller, we can do so explicitly with the grid row property. Like saying start at horizontal line 1 and end at horizontal line 4. And now you can see that photo spans across 3 rows and everything else was repositioned accordingly.

But, since we don't want to use the line numbers explicitly, we'll use span 2 to say start wherever, span 2 rows, and then automatically end wherever. So that's how we can make an item taller. If we want to make an item wider, we can use the grid column property and we can implement it with the exact same value. And now, we can go into our HTML and start applying these classes to the items. The end result is a responsive photo gallery, but there is one slight problem.

At smaller sizes, spanning 2 grid lines doesn't work very well. Notice how the items on the right are way too skinny. We can easily fix this by wrapping our classes in a media query. This means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport. And now things will look much better on small devices.

And that brings us to grid number 3. It has this intro animation and notice how each A grid item comes in clockwise until it gets to the center. You'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size. Now, again, we have the same basic HTML structure, just a bunch of divs inside a grid. We'll set the display to grid, give it a gap, but this time we're went to create an explicit grid using grid template areas.

This is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid. Notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to l and then in the middle we're actually using emojis to represent the main content. And A shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names. Notice how he's using shapes to define the grid areas, making it extremely clear which part of the UI each grid area is for. Now, once you have your grid template areas defined, you can set some sizing for the rows and columns.

In this example, the grid container has a fixed height, so we'll have each individual row take up exactly 25% of the height using the repeat function. When it comes to our columns, we'll give the 1st column a fixed width, the 2 middle columns an auto property to automatically resize based on the viewport, and then the last column a fixed width of also 240. Then the next step is to place the children in their appropriate grid area. Now, because I have all the children laid out in a logical order, I'm going to use nth child to select them, but you could definitely use your own custom class names here as well. The important thing to notice is that we're applying grid area a to this element.

No matter where it sits in the container, it will take up that grid template area you defined above. Now, we'll repeat this process for every single area in the grid. The end result is this grid with all children in the appropriate spots. And now, how do we impress our friends with this fancy staggered intro animation? Well, the first thing I'm going to do is set up a variable for the staggered delay.

This will allow us to change the timing without having to manually update the delay for all 13 elements. Next, we're going to need a keyframes animation. If you're not familiar with keyframes, they basically allow you to move from one set of properties to another. From is the starting point, to is the ending point. We want to start with an opacity of 0 or invisible, a scale of 0.3, and then we'll also rotate the color by a 180 degrees.

That's how I create that rainbow like color change when the items are animated in. When the animation's complete, the opacity should be 1, the scale should be 1, and the hue rotate should be 0. Now, CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation. We can apply this animation to all the cards by setting it as the animation name. Then, we'll also give it a duration of 700 milliseconds and a timing function of ease out.

Now, one last important point here is that we also need to set the animation fill mode to backwards. This will set the elements to their first key frame value which, in our case, will be invisible. Otherwise, the cards would be visible before the animation starts and that just wouldn't look right at all. That takes care of the animation, but now we want to stagger it. And We can do that by setting an animation delay on each individual element.

But, we want to do this in a smart way, so if we decide to change the delay, We don't have to update all 13 items. To help us, I'm going to use the CSS calc function. It can perform basic calculations on values. For the first item, we'll say 1 times the stagger delay. For the second item, we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items.

And And, there's still obviously a lot of code duplication here, but you could make this much more efficient by using something like Sass, where you can run a programmatic for loop. And, that's basically all there is to it. We now have this unique animated grid without any JavaScript or external CSS framework. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to grab a full source code on FireShip IO.

Thanks for watching, and I will see you in the next one.
Today, you'll learn the basics of CSS Grid by building 3 different grid layouts from scratch. The first example is a responsive 12 column grid.
It replaces most of the use cases that you'd find in a grid system like Twitter Bootstrap, but it does so with only 3 lines of code and removes the need for all this crazy markup HTML. Next, we'll build a responsive photo gallery. And 3rd, we'll build an explicit grid that has this fancy, staggered intro animation. By by the end of this video, you should know enough about grid to start putting it to use in your own projects. If you're new here, like and subscribe, and feel free to grab your mouse and keyboard to code along with us.
animation
graphic design
visualization
multimedia
When you start, Just have a good feeling and be happy and and love with life and the world and sit down and begin playing. I'd like to start off by sharing my own experience with Grid. Because on Fireship IO, I was previously using a flexbox based system, like you would find in Bootstrap and many other CSS frameworks. Now, there's nothing wrong with using a third party solution, but when you use Grid, you don't have to add any additional CSS to your bundle size. The grid system just works natively in the browser. But, the much more important benefit was how much it simplified the codebase. My HTML markup had a bunch of columns, each with its own collection of classes to make that column responsive.
After moving to CSS Grid, I was able to remove all these classes and implement my own grid system with just three lines of code. And on top of that, beautiful designs that you would normally only find in a magazine are much easier to implement with Grid, because the system itself is inspired by print based grids. Now, I should warn you that grid is pretty weird to learn at first. So, let's jump into some examples and understand what every line of code is doing.
graphic design
You can follow along by opening your editor and creating an HTML all in CSS file, or you can clone the project from GitHub and you'll see that each grid is broken down into its own HTML and CSS files. This first grid building is basically an infinite set of responsive columns.
blogging
And that's really useful if you have something like a feed of cards, like the lesson feed on Fireship IO. And a grid like this, we'll also replace many of the use cases for something like Twitter Bootstrap Grid. Go ahead and open an HTML file in Versus Code, then can start typing HTML to autocomplete the boilerplate code. Next, I'm going to go into the head of the document, add a style tag, and then import our Base CSS as well as our basic grid for this example. The base CSS file is just something that I'm going to share across all the examples. If we open that file, you'll notice that it has a card class that defines a flex box that aligns its content in the center. None of this code is actually required for your grid to work, it's just there to make things look nice, so feel free to copy it from the main repo.
Now going back to our HTML, we'll go into the body and set up a section that will serve as our main grid container. Then, all of the immediate children inside of this container are known as grid items. Now, for this demo, I'm adding 12 children to the grid, but I'm assuming the content inside the grid is dynamic.
children
Meaning, we might have 3 items in there, 50 items, or whatever. So what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size.
The first step is to set display grid on the container and You'll notice right now, everything is just stacked up in a single column. Let's start by giving our children a little bit of spacing. We can do that with the gap property Instead of setting margins on the children, that will guarantee that we always have 1 REM of spacing between the items both horizontally and vertically. Now, Now, one way to create columns is to use the grid template columns property.
space
Let's start by creating an explicit grid, or a grid that has all of its columns defined in advance.
Now, since we're talking about columns, think about the width of the grid. 1 f r or 1 fractional unit represents one part of the available space. Currently, we have 1 column, so 1 f r is a 100% of the available space. We can add another column by simply adding another f r unit. And now 1 f r equals 50% of the available space. And we can keep doing this for as many columns as we need, or in our case, 12 columns.
space
geometry
The end result is an explicit grid that always has 12 columns. But there's a few problems here. First of all, this grid is not responsive and this code was really ugly. Fortunately, CSS Grid has a helper function called repeat. Instead of writing out each column manually, we can simply call repeat 12, and then pass in the unit that we want to repeat. This code is identical to the code above, but much more concise and readable. Now, currently in the demo, each column is too thin. Let's look at how we can set a minimum width of 2 40 pixels. We'll try again by repeating 12 columns, but this time use the min max function. This is like saying make sure my columns don't go below 200 pixels in width, but allow them to expand as big as one fractional unit will allow. What you'll notice is that our cards are no longer too skinny, but we now have Another problem. They're overflowing on the horizontal axis. So the question becomes, how do we make these columns break down into additional rows when there's no longer available space? The answer is by creating an implicit grid. When we call repeat, instead of repeating 12 times, we'll repeat with autofit and then use the same min max value you as before. What autofit does is tell grid to calculate the number of rows and columns on the fly. And now you can see that we have a truly responsive grid. It only took 3 lines of code and no additional markup or classes in our HTML. It's worth noting that there's also an autofill option. The difference is subtle, but important. Notice here in the demo how the The top autofill option is going to create additional columns when there becomes additional space, but autofit on the bottom will expand its children to take up all of the available space. Now, Now, when you're working with Grid and things aren't going the way you expect, open up Firefox Dev Tools. It has a really good grid and Flexbox inspector.
And, you can see here how it allows me to visualize the lines and tracks on the grid. Now, it's time to move on to example number 2. A responsive mosaic photo gallery. What you'll notice about this example, is that some of the photos are bigger, some are taller, and some are wider. And, they also reposition themselves gracefully when the viewport size changes. Let's start by going into the HTML and setting up a grid container.
graphic design
photography
visualization
geometry
Inside the container, we have 12 divs like we did in the previous example, but each div has a photo URL as its background. And, by the way, these are free to use photos from Unsplash. Now if we go into the CSS, we'll use the code from the previous example as our starting point, but you'll notice the rows in the grid are very short. That's because they're being automatically sized to the text content in the children. Now, when you have an implicit grid like this, it can be useful to set the size of the row. If we want all of our rows to be exactly 240 pixels tall, we can set the grid auto rows property to that value. And now each automatically created row will be fixed to that height. Now our goal is to change the sizing of individual grid items. Let's create a class called card tall. Any item with this class should span across multiple rows vertically. We can do that with the grid row property and then span2 will tell it to span across 2 rows from its starting position. We can use a slash to also specify its ending point, which in this case can be figured out automatically by the grid algorithm. So, the grid row property is like saying start here slash end here. It makes more sense when you look at your grid in Firefox and display the grid line numbers.
If we look at the first photo, you can see it starts at column 1 row 1, then ends at column 2 row 2. If we want to make this photo taller, we can do so explicitly with the grid row property. Like saying start at horizontal line 1 and end at horizontal line 4.
photography
And now you can see that photo spans across 3 rows and everything else was repositioned accordingly. But, since we don't want to use the line numbers explicitly, we'll use span 2 to say start wherever, span 2 rows, and then automatically end wherever. So that's how we can make an item taller. If we want to make an item wider, we can use the grid column property and we can implement it with the exact same value.
And now, we can go into our HTML and start applying these classes to the items. The end result is a responsive photo gallery, but there is one slight problem. At smaller sizes, spanning 2 grid lines doesn't work very well. Notice how the items on the right are way too skinny.
graphic design
We can easily fix this by wrapping our classes in a media query.
This means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport. And now things will look much better on small devices. And that brings us to grid number 3. It has this intro animation and notice how each A grid item comes in clockwise until it gets to the center. You'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size.
animation
geometry
Now, again, we have the same basic HTML structure, just a bunch of divs inside a grid.
We'll set the display to grid, give it a gap, but this time we're went to create an explicit grid using grid template areas. This is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid. Notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to l and then in the middle we're actually using emojis to represent the main content. And A shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names. Notice how he's using shapes to define the grid areas, making it extremely clear which part of the UI each grid area is for. Now, once you have your grid template areas defined, you can set some sizing for the rows and columns. In this example, the grid container has a fixed height, so we'll have each individual row take up exactly 25% of the height using the repeat function.
geometry
When it comes to our columns, we'll give the 1st column a fixed width, the 2 middle columns an auto property to automatically resize based on the viewport, and then the last column a fixed width of also 240.
Then the next step is to place the children in their appropriate grid area. Now, because I have all the children laid out in a logical order, I'm going to use nth child to select them, but you could definitely use your own custom class names here as well. The important thing to notice is that we're applying grid area a to this element.
children
No matter where it sits in the container, it will take up that grid template area you defined above.
Now, we'll repeat this process for every single area in the grid. The end result is this grid with all children in the appropriate spots. And now, how do we impress our friends with this fancy staggered intro animation? Well, the first thing I'm going to do is set up a variable for the staggered delay. This will allow us to change the timing without having to manually update the delay for all 13 elements. Next, we're going to need a keyframes animation. If you're not familiar with keyframes, they basically allow you to move from one set of properties to another. From is the starting point, to is the ending point. We want to start with an opacity of 0 or invisible, a scale of 0.3, and then we'll also rotate the color by a 180 degrees. That's how I create that rainbow like color change when the items are animated in. When the animation's complete, the opacity should be 1, the scale should be 1, and the hue rotate should be 0. Now, CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation. We can apply this animation to all the cards by setting it as the animation name. Then, we'll also give it a duration of 700 milliseconds and a timing function of ease out. Now, one last important point here is that we also need to set the animation fill mode to backwards. This will set the elements to their first key frame value which, in our case, will be invisible. Otherwise, the cards would be visible before the animation starts and that just wouldn't look right at all. That takes care of the animation, but now we want to stagger it. And We can do that by setting an animation delay on each individual element. But, we want to do this in a smart way, so if we decide to change the delay, We don't have to update all 13 items.
animation
graphic design
geometry
To help us, I'm going to use the CSS calc function. It can perform basic calculations on values. For the first item, we'll say 1 times the stagger delay.
For the second item, we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items. And And, there's still obviously a lot of code duplication here, but you could make this much more efficient by using something like Sass, where you can run a programmatic for loop. And, that's basically all there is to it. We now have this unique animated grid without any JavaScript or external CSS framework. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to grab a full source code on FireShip IO. Thanks for watching, and I will see you in the next one.
streaming
animation
video gaming
youtube
documentary
programming
Today, you'll learn the basics of CSS Grid by building 3 different grid layouts from scratch. The first example is a responsive 12 column grid. It replaces most of the use cases that you'd find in a grid system like Twitter Bootstrap, but it does so with only 3 lines of code and removes the need for all this crazy markup HTML. Next, we'll build a responsive photo gallery. And 3rd, we'll build an explicit grid that has this fancy, staggered intro animation. By by the end of this video, you should know enough about grid to start putting it to use in your own projects. If you're new here, like and subscribe, and feel free to grab your mouse and keyboard to code along with us. When you start, Just have a good feeling and be happy and and love with life and the world and sit down and begin playing. I'd like to start off by sharing my own experience with Grid. Because on Fireship IO, I was previously using a flexbox based system, like you would find in Bootstrap and many other CSS frameworks. Now, there's nothing wrong with using a third party solution, but when you use Grid, you don't have to add any additional CSS to your bundle size. The grid system just works natively in the browser. But, the much more important benefit was how much it simplified the codebase. My HTML markup had a bunch of columns, each with its own collection of classes to make that column responsive. After moving to CSS Grid, I was able to remove all these classes and implement my own grid system with just three lines of code. And on top of that, beautiful designs that you would normally only find in a magazine are much easier to implement with Grid, because the system itself is inspired by print based grids. Now, I should warn you that grid is pretty weird to learn at first. So, let's jump into some examples and understand what every line of code is doing. You can follow along by opening your editor and creating an HTML all in CSS file, or you can clone the project from GitHub and you'll see that each grid is broken down into its own HTML and CSS files. This first grid building is basically an infinite set of responsive columns. And that's really useful if you have something like a feed of cards, like the lesson feed on Fireship IO. And a grid like this, we'll also replace many of the use cases for something like Twitter Bootstrap Grid. Go ahead and open an HTML file in Versus Code, then can start typing HTML to autocomplete the boilerplate code. Next, I'm going to go into the head of the document, add a style tag, and then import our Base CSS as well as our basic grid for this example. The base CSS file is just something that I'm going to share across all the examples. If we open that file, you'll notice that it has a card class that defines a flex box that aligns its content in the center. None of this code is actually required for your grid to work, it's just there to make things look nice, so feel free to copy it from the main repo. Now going back to our HTML, we'll go into the body and set up a section that will serve as our main grid container. Then, all of the immediate children inside of this container are known as grid items. Now, for this demo, I'm adding 12 children to the grid, but I'm assuming the content inside the grid is dynamic. Meaning, we might have 3 items in there, 50 items, or whatever. So what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size. The first step is to set display grid on the container and You'll notice right now, everything is just stacked up in a single column. Let's start by giving our children a little bit of spacing. We can do that with the gap property Instead of setting margins on the children, that will guarantee that we always have 1 REM of spacing between the items both horizontally and vertically. Now, Now, one way to create columns is to use the grid template columns property. Let's start by creating an explicit grid, or a grid that has all of its columns defined in advance. Now, since we're talking about columns, think about the width of the grid. 1 f r or 1 fractional unit represents one part of the available space. Currently, we have 1 column, so 1 f r is a 100% of the available space. We can add another column by simply adding another f r unit. And now 1 f r equals 50% of the available space. And we can keep doing this for as many columns as we need, or in our case, 12 columns. The end result is an explicit grid that always has 12 columns. But there's a few problems here. First of all, this grid is not responsive and this code was really ugly. Fortunately, CSS Grid has a helper function called repeat. Instead of writing out each column manually, we can simply call repeat 12, and then pass in the unit that we want to repeat. This code is identical to the code above, but much more concise and readable. Now, currently in the demo, each column is too thin. Let's look at how we can set a minimum width of 2 40 pixels. We'll try again by repeating 12 columns, but this time use the min max function. This is like saying make sure my columns don't go below 200 pixels in width, but allow them to expand as big as one fractional unit will allow. What you'll notice is that our cards are no longer too skinny, but we now have Another problem. They're overflowing on the horizontal axis. So the question becomes, how do we make these columns break down into additional rows when there's no longer available space? The answer is by creating an implicit grid. When we call repeat, instead of repeating 12 times, we'll repeat with autofit and then use the same min max value you as before. What autofit does is tell grid to calculate the number of rows and columns on the fly. And now you can see that we have a truly responsive grid. It only took 3 lines of code and no additional markup or classes in our HTML. It's worth noting that there's also an autofill option. The difference is subtle, but important. Notice here in the demo how the The top autofill option is going to create additional columns when there becomes additional space, but autofit on the bottom will expand its children to take up all of the available space. Now, Now, when you're working with Grid and things aren't going the way you expect, open up Firefox Dev Tools. It has a really good grid and Flexbox inspector. And, you can see here how it allows me to visualize the lines and tracks on the grid. Now, it's time to move on to example number 2. A responsive mosaic photo gallery. What you'll notice about this example, is that some of the photos are bigger, some are taller, and some are wider. And, they also reposition themselves gracefully when the viewport size changes. Let's start by going into the HTML and setting up a grid container. Inside the container, we have 12 divs like we did in the previous example, but each div has a photo URL as its background. And, by the way, these are free to use photos from Unsplash. Now if we go into the CSS, we'll use the code from the previous example as our starting point, but you'll notice the rows in the grid are very short. That's because they're being automatically sized to the text content in the children. Now, when you have an implicit grid like this, it can be useful to set the size of the row. If we want all of our rows to be exactly 240 pixels tall, we can set the grid auto rows property to that value. And now each automatically created row will be fixed to that height. Now our goal is to change the sizing of individual grid items. Let's create a class called card tall. Any item with this class should span across multiple rows vertically. We can do that with the grid row property and then span2 will tell it to span across 2 rows from its starting position. We can use a slash to also specify its ending point, which in this case can be figured out automatically by the grid algorithm. So, the grid row property is like saying start here slash end here. It makes more sense when you look at your grid in Firefox and display the grid line numbers. If we look at the first photo, you can see it starts at column 1 row 1, then ends at column 2 row 2. If we want to make this photo taller, we can do so explicitly with the grid row property. Like saying start at horizontal line 1 and end at horizontal line 4. And now you can see that photo spans across 3 rows and everything else was repositioned accordingly. But, since we don't want to use the line numbers explicitly, we'll use span 2 to say start wherever, span 2 rows, and then automatically end wherever. So that's how we can make an item taller. If we want to make an item wider, we can use the grid column property and we can implement it with the exact same value. And now, we can go into our HTML and start applying these classes to the items. The end result is a responsive photo gallery, but there is one slight problem. At smaller sizes, spanning 2 grid lines doesn't work very well. Notice how the items on the right are way too skinny. We can easily fix this by wrapping our classes in a media query. This means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport. And now things will look much better on small devices. And that brings us to grid number 3. It has this intro animation and notice how each A grid item comes in clockwise until it gets to the center. You'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size. Now, again, we have the same basic HTML structure, just a bunch of divs inside a grid. We'll set the display to grid, give it a gap, but this time we're went to create an explicit grid using grid template areas. This is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid. Notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to l and then in the middle we're actually using emojis to represent the main content. And A shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names. Notice how he's using shapes to define the grid areas, making it extremely clear which part of the UI each grid area is for. Now, once you have your grid template areas defined, you can set some sizing for the rows and columns. In this example, the grid container has a fixed height, so we'll have each individual row take up exactly 25% of the height using the repeat function. When it comes to our columns, we'll give the 1st column a fixed width, the 2 middle columns an auto property to automatically resize based on the viewport, and then the last column a fixed width of also 240. Then the next step is to place the children in their appropriate grid area. Now, because I have all the children laid out in a logical order, I'm going to use nth child to select them, but you could definitely use your own custom class names here as well. The important thing to notice is that we're applying grid area a to this element. No matter where it sits in the container, it will take up that grid template area you defined above. Now, we'll repeat this process for every single area in the grid. The end result is this grid with all children in the appropriate spots. And now, how do we impress our friends with this fancy staggered intro animation? Well, the first thing I'm going to do is set up a variable for the staggered delay. This will allow us to change the timing without having to manually update the delay for all 13 elements. Next, we're going to need a keyframes animation. If you're not familiar with keyframes, they basically allow you to move from one set of properties to another. From is the starting point, to is the ending point. We want to start with an opacity of 0 or invisible, a scale of 0.3, and then we'll also rotate the color by a 180 degrees. That's how I create that rainbow like color change when the items are animated in. When the animation's complete, the opacity should be 1, the scale should be 1, and the hue rotate should be 0. Now, CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation. We can apply this animation to all the cards by setting it as the animation name. Then, we'll also give it a duration of 700 milliseconds and a timing function of ease out. Now, one last important point here is that we also need to set the animation fill mode to backwards. This will set the elements to their first key frame value which, in our case, will be invisible. Otherwise, the cards would be visible before the animation starts and that just wouldn't look right at all. That takes care of the animation, but now we want to stagger it. And We can do that by setting an animation delay on each individual element. But, we want to do this in a smart way, so if we decide to change the delay, We don't have to update all 13 items. To help us, I'm going to use the CSS calc function. It can perform basic calculations on values. For the first item, we'll say 1 times the stagger delay. For the second item, we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items. And And, there's still obviously a lot of code duplication here, but you could make this much more efficient by using something like Sass, where you can run a programmatic for loop. And, that's basically all there is to it. We now have this unique animated grid without any JavaScript or external CSS framework. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to grab a full source code on FireShip IO. Thanks for watching, and I will see you in the next one.
Today,
today
you'll
you'll
learn
learn
the
the
basics
basics
of
of
CSS
css
Grid
grid
by
by
building
building
3
3
different
different
grid
grid
layouts
layouts
from
from
scratch.
scratch
The
the
first
first
example
example
is
is
a
a
responsive
responsive
12
12
column
column
grid.
grid
It
it
replaces
replaces
most
most
of
of
the
the
use
use
cases
cases
that
that
you'd
you'd
find
find
in
in
a
a
grid
grid
system
system
like
like
Twitter
twitter
Bootstrap,
bootstrap
but
but
it
it
does
does
so
so
with
with
only
only
3
3
lines
lines
of
of
code
code
and
and
removes
removes
the
the
need
need
for
for
all
all
this
this
crazy
crazy
markup
markup
HTML.
html
Next,
next
we'll
we'll
build
build
a
a
responsive
responsive
photo
photo
gallery.
gallery
And
and
3rd,
3rd
we'll
we'll
build
build
an
an
explicit
explicit
grid
grid
that
that
has
has
this
this
fancy,
fancy
staggered
staggered
intro
intro
animation.
animation
By
by
by
by
the
the
end
end
of
of
this
this
video,
video
you
you
should
should
know
know
enough
enough
about
about
grid
grid
to
to
start
start
putting
putting
it
it
to
to
use
use
in
in
your
your
own
own
projects.
projects
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
feel
feel
free
free
to
to
grab
grab
your
your
mouse
mouse
and
and
keyboard
keyboard
to
to
code
code
along
along
with
with
us.
us
When
when
you
you
start,
start
Just
just
have
have
a
a
good
good
feeling
feeling
and
and
be
be
happy
happy
and
and
and
and
love
love
with
with
life
life
and
and
the
the
world
world
and
and
sit
sit
down
down
and
and
begin
begin
playing.
playing
I'd
i'd
like
like
to
to
start
start
off
off
by
by
sharing
sharing
my
my
own
own
experience
experience
with
with
Grid.
grid
Because
because
on
on
Fireship
fireship
IO,
io
I
i
was
was
previously
previously
using
using
a
a
flexbox
flexbox
based
based
system,
system
like
like
you
you
would
would
find
find
in
in
Bootstrap
bootstrap
and
and
many
many
other
other
CSS
css
frameworks.
frameworks
Now,
now
there's
there's
nothing
nothing
wrong
wrong
with
with
using
using
a
a
third
third
party
party
solution,
solution
but
but
when
when
you
you
use
use
Grid,
grid
you
you
don't
don't
have
have
to
to
add
add
any
any
additional
additional
CSS
css
to
to
your
your
bundle
bundle
size.
size
The
the
grid
grid
system
system
just
just
works
works
natively
natively
in
in
the
the
browser.
browser
But,
but
the
the
much
much
more
more
important
important
benefit
benefit
was
was
how
how
much
much
it
it
simplified
simplified
the
the
codebase.
codebase
My
my
HTML
html
markup
markup
had
had
a
a
bunch
bunch
of
of
columns,
columns
each
each
with
with
its
its
own
own
collection
collection
of
of
classes
classes
to
to
make
make
that
that
column
column
responsive.
responsive
After
after
moving
moving
to
to
CSS
css
Grid,
grid
I
i
was
was
able
able
to
to
remove
remove
all
all
these
these
classes
classes
and
and
implement
implement
my
my
own
own
grid
grid
system
system
with
with
just
just
three
three
lines
lines
of
of
code.
code
And
and
on
on
top
top
of
of
that,
that
beautiful
beautiful
designs
designs
that
that
you
you
would
would
normally
normally
only
only
find
find
in
in
a
a
magazine
magazine
are
are
much
much
easier
easier
to
to
implement
implement
with
with
Grid,
grid
because
because
the
the
system
system
itself
itself
is
is
inspired
inspired
by
by
print
print
based
based
grids.
grids
Now,
now
I
i
should
should
warn
warn
you
you
that
that
grid
grid
is
is
pretty
pretty
weird
weird
to
to
learn
learn
at
at
first.
first
So,
so
let's
let's
jump
jump
into
into
some
some
examples
examples
and
and
understand
understand
what
what
every
every
line
line
of
of
code
code
is
is
doing.
doing
You
you
can
can
follow
follow
along
along
by
by
opening
opening
your
your
editor
editor
and
and
creating
creating
an
an
HTML
html
all
all
in
in
CSS
css
file,
file
or
or
you
you
can
can
clone
clone
the
the
project
project
from
from
GitHub
github
and
and
you'll
you'll
see
see
that
that
each
each
grid
grid
is
is
broken
broken
down
down
into
into
its
its
own
own
HTML
html
and
and
CSS
css
files.
files
This
this
first
first
grid
grid
building
building
is
is
basically
basically
an
an
infinite
infinite
set
set
of
of
responsive
responsive
columns.
columns
And
and
that's
that's
really
really
useful
useful
if
if
you
you
have
have
something
something
like
like
a
a
feed
feed
of
of
cards,
cards
like
like
the
the
lesson
lesson
feed
feed
on
on
Fireship
fireship
IO.
io
And
and
a
a
grid
grid
like
like
this,
this
we'll
we'll
also
also
replace
replace
many
many
of
of
the
the
use
use
cases
cases
for
for
something
something
like
like
Twitter
twitter
Bootstrap
bootstrap
Grid.
grid
Go
go
ahead
ahead
and
and
open
open
an
an
HTML
html
file
file
in
in
Versus
versus
Code,
code
then
then
can
can
start
start
typing
typing
HTML
html
to
to
autocomplete
autocomplete
the
the
boilerplate
boilerplate
code.
code
Next,
next
I'm
i'm
going
going
to
to
go
go
into
into
the
the
head
head
of
of
the
the
document,
document
add
add
a
a
style
style
tag,
tag
and
and
then
then
import
import
our
our
Base
base
CSS
css
as
as
well
well
as
as
our
our
basic
basic
grid
grid
for
for
this
this
example.
example
The
the
base
base
CSS
css
file
file
is
is
just
just
something
something
that
that
I'm
i'm
going
going
to
to
share
share
across
across
all
all
the
the
examples.
examples
If
if
we
we
open
open
that
that
file,
file
you'll
you'll
notice
notice
that
that
it
it
has
has
a
a
card
card
class
class
that
that
defines
defines
a
a
flex
flex
box
box
that
that
aligns
aligns
its
its
content
content
in
in
the
the
center.
center
None
none
of
of
this
this
code
code
is
is
actually
actually
required
required
for
for
your
your
grid
grid
to
to
work,
work
it's
it's
just
just
there
there
to
to
make
make
things
things
look
look
nice,
nice
so
so
feel
feel
free
free
to
to
copy
copy
it
it
from
from
the
the
main
main
repo.
repo
Now
now
going
going
back
back
to
to
our
our
HTML,
html
we'll
we'll
go
go
into
into
the
the
body
body
and
and
set
set
up
up
a
a
section
section
that
that
will
will
serve
serve
as
as
our
our
main
main
grid
grid
container.
container
Then,
then
all
all
of
of
the
the
immediate
immediate
children
children
inside
inside
of
of
this
this
container
container
are
are
known
known
as
as
grid
grid
items.
items
Now,
now
for
for
this
this
demo,
demo
I'm
i'm
adding
adding
12
12
children
children
to
to
the
the
grid,
grid
but
but
I'm
i'm
assuming
assuming
the
the
content
content
inside
inside
the
the
grid
grid
is
is
dynamic.
dynamic
Meaning,
meaning
we
we
might
might
have
have
3
3
items
items
in
in
there,
there
50
50
items,
items
or
or
whatever.
whatever
So
so
what
what
we
we
need
need
is
is
an
an
implicit
implicit
grid
grid
that
that
can
can
figure
figure
out
out
the
the
right
right
number
number
of
of
columns
columns
and
and
rows
rows
based
based
on
on
the
the
content
content
size
size
and
and
the
the
viewport
viewport
size.
size
The
the
first
first
step
step
is
is
to
to
set
set
display
display
grid
grid
on
on
the
the
container
container
and
and
You'll
you'll
notice
notice
right
right
now,
now
everything
everything
is
is
just
just
stacked
stacked
up
up
in
in
a
a
single
single
column.
column
Let's
let's
start
start
by
by
giving
giving
our
our
children
children
a
a
little
little
bit
bit
of
of
spacing.
spacing
We
we
can
can
do
do
that
that
with
with
the
the
gap
gap
property
property
Instead
instead
of
of
setting
setting
margins
margins
on
on
the
the
children,
children
that
that
will
will
guarantee
guarantee
that
that
we
we
always
always
have
have
1
1
REM
rem
of
of
spacing
spacing
between
between
the
the
items
items
both
both
horizontally
horizontally
and
and
vertically.
vertically
Now,
now
Now,
now
one
one
way
way
to
to
create
create
columns
columns
is
is
to
to
use
use
the
the
grid
grid
template
template
columns
columns
property.
property
Let's
let's
start
start
by
by
creating
creating
an
an
explicit
explicit
grid,
grid
or
or
a
a
grid
grid
that
that
has
has
all
all
of
of
its
its
columns
columns
defined
defined
in
in
advance.
advance
Now,
now
since
since
we're
we're
talking
talking
about
about
columns,
columns
think
think
about
about
the
the
width
width
of
of
the
the
grid.
grid
1
1
f
f
r
r
or
or
1
1
fractional
fractional
unit
unit
represents
represents
one
one
part
part
of
of
the
the
available
available
space.
space
Currently,
currently
we
we
have
have
1
1
column,
column
so
so
1
1
f
f
r
r
is
is
a
a
100%
100%
of
of
the
the
available
available
space.
space
We
we
can
can
add
add
another
another
column
column
by
by
simply
simply
adding
adding
another
another
f
f
r
r
unit.
unit
And
and
now
now
1
1
f
f
r
r
equals
equals
50%
50%
of
of
the
the
available
available
space.
space
And
and
we
we
can
can
keep
keep
doing
doing
this
this
for
for
as
as
many
many
columns
columns
as
as
we
we
need,
need
or
or
in
in
our
our
case,
case
12
12
columns.
columns
The
the
end
end
result
result
is
is
an
an
explicit
explicit
grid
grid
that
that
always
always
has
has
12
12
columns.
columns
But
but
there's
there's
a
a
few
few
problems
problems
here.
here
First
first
of
of
all,
all
this
this
grid
grid
is
is
not
not
responsive
responsive
and
and
this
this
code
code
was
was
really
really
ugly.
ugly
Fortunately,
fortunately
CSS
css
Grid
grid
has
has
a
a
helper
helper
function
function
called
called
repeat.
repeat
Instead
instead
of
of
writing
writing
out
out
each
each
column
column
manually,
manually
we
we
can
can
simply
simply
call
call
repeat
repeat
12,
12
and
and
then
then
pass
pass
in
in
the
the
unit
unit
that
that
we
we
want
want
to
to
repeat.
repeat
This
this
code
code
is
is
identical
identical
to
to
the
the
code
code
above,
above
but
but
much
much
more
more
concise
concise
and
and
readable.
readable
Now,
now
currently
currently
in
in
the
the
demo,
demo
each
each
column
column
is
is
too
too
thin.
thin
Let's
let's
look
look
at
at
how
how
we
we
can
can
set
set
a
a
minimum
minimum
width
width
of
of
2
2
40
40
pixels.
pixels
We'll
we'll
try
try
again
again
by
by
repeating
repeating
12
12
columns,
columns
but
but
this
this
time
time
use
use
the
the
min
min
max
max
function.
function
This
this
is
is
like
like
saying
saying
make
make
sure
sure
my
my
columns
columns
don't
don't
go
go
below
below
200
200
pixels
pixels
in
in
width,
width
but
but
allow
allow
them
them
to
to
expand
expand
as
as
big
big
as
as
one
one
fractional
fractional
unit
unit
will
will
allow.
allow
What
what
you'll
you'll
notice
notice
is
is
that
that
our
our
cards
cards
are
are
no
no
longer
longer
too
too
skinny,
skinny
but
but
we
we
now
now
have
have
Another
another
problem.
problem
They're
they're
overflowing
overflowing
on
on
the
the
horizontal
horizontal
axis.
axis
So
so
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
make
make
these
these
columns
columns
break
break
down
down
into
into
additional
additional
rows
rows
when
when
there's
there's
no
no
longer
longer
available
available
space?
space
The
the
answer
answer
is
is
by
by
creating
creating
an
an
implicit
implicit
grid.
grid
When
when
we
we
call
call
repeat,
repeat
instead
instead
of
of
repeating
repeating
12
12
times,
times
we'll
we'll
repeat
repeat
with
with
autofit
autofit
and
and
then
then
use
use
the
the
same
same
min
min
max
max
value
value
you
you
as
as
before.
before
What
what
autofit
autofit
does
does
is
is
tell
tell
grid
grid
to
to
calculate
calculate
the
the
number
number
of
of
rows
rows
and
and
columns
columns
on
on
the
the
fly.
fly
And
and
now
now
you
you
can
can
see
see
that
that
we
we
have
have
a
a
truly
truly
responsive
responsive
grid.
grid
It
it
only
only
took
took
3
3
lines
lines
of
of
code
code
and
and
no
no
additional
additional
markup
markup
or
or
classes
classes
in
in
our
our
HTML.
html
It's
it's
worth
worth
noting
noting
that
that
there's
there's
also
also
an
an
autofill
autofill
option.
option
The
the
difference
difference
is
is
subtle,
subtle
but
but
important.
important
Notice
notice
here
here
in
in
the
the
demo
demo
how
how
the
the
The
the
top
top
autofill
autofill
option
option
is
is
going
going
to
to
create
create
additional
additional
columns
columns
when
when
there
there
becomes
becomes
additional
additional
space,
space
but
but
autofit
autofit
on
on
the
the
bottom
bottom
will
will
expand
expand
its
its
children
children
to
to
take
take
up
up
all
all
of
of
the
the
available
available
space.
space
Now,
now
Now,
now
when
when
you're
you're
working
working
with
with
Grid
grid
and
and
things
things
aren't
aren't
going
going
the
the
way
way
you
you
expect,
expect
open
open
up
up
Firefox
firefox
Dev
dev
Tools.
tools
It
it
has
has
a
a
really
really
good
good
grid
grid
and
and
Flexbox
flexbox
inspector.
inspector
And,
and
you
you
can
can
see
see
here
here
how
how
it
it
allows
allows
me
me
to
to
visualize
visualize
the
the
lines
lines
and
and
tracks
tracks
on
on
the
the
grid.
grid
Now,
now
it's
it's
time
time
to
to
move
move
on
on
to
to
example
example
number
number
2.
2
A
a
responsive
responsive
mosaic
mosaic
photo
photo
gallery.
gallery
What
what
you'll
you'll
notice
notice
about
about
this
this
example,
example
is
is
that
that
some
some
of
of
the
the
photos
photos
are
are
bigger,
bigger
some
some
are
are
taller,
taller
and
and
some
some
are
are
wider.
wider
And,
and
they
they
also
also
reposition
reposition
themselves
themselves
gracefully
gracefully
when
when
the
the
viewport
viewport
size
size
changes.
changes
Let's
let's
start
start
by
by
going
going
into
into
the
the
HTML
html
and
and
setting
setting
up
up
a
a
grid
grid
container.
container
Inside
inside
the
the
container,
container
we
we
have
have
12
12
divs
divs
like
like
we
we
did
did
in
in
the
the
previous
previous
example,
example
but
but
each
each
div
div
has
has
a
a
photo
photo
URL
url
as
as
its
its
background.
background
And,
and
by
by
the
the
way,
way
these
these
are
are
free
free
to
to
use
use
photos
photos
from
from
Unsplash.
unsplash
Now
now
if
if
we
we
go
go
into
into
the
the
CSS,
css
we'll
we'll
use
use
the
the
code
code
from
from
the
the
previous
previous
example
example
as
as
our
our
starting
starting
point,
point
but
but
you'll
you'll
notice
notice
the
the
rows
rows
in
in
the
the
grid
grid
are
are
very
very
short.
short
That's
that's
because
because
they're
they're
being
being
automatically
automatically
sized
sized
to
to
the
the
text
text
content
content
in
in
the
the
children.
children
Now,
now
when
when
you
you
have
have
an
an
implicit
implicit
grid
grid
like
like
this,
this
it
it
can
can
be
be
useful
useful
to
to
set
set
the
the
size
size
of
of
the
the
row.
row
If
if
we
we
want
want
all
all
of
of
our
our
rows
rows
to
to
be
be
exactly
exactly
240
240
pixels
pixels
tall,
tall
we
we
can
can
set
set
the
the
grid
grid
auto
auto
rows
rows
property
property
to
to
that
that
value.
value
And
and
now
now
each
each
automatically
automatically
created
created
row
row
will
will
be
be
fixed
fixed
to
to
that
that
height.
height
Now
now
our
our
goal
goal
is
is
to
to
change
change
the
the
sizing
sizing
of
of
individual
individual
grid
grid
items.
items
Let's
let's
create
create
a
a
class
class
called
called
card
card
tall.
tall
Any
any
item
item
with
with
this
this
class
class
should
should
span
span
across
across
multiple
multiple
rows
rows
vertically.
vertically
We
we
can
can
do
do
that
that
with
with
the
the
grid
grid
row
row
property
property
and
and
then
then
span2
span2
will
will
tell
tell
it
it
to
to
span
span
across
across
2
2
rows
rows
from
from
its
its
starting
starting
position.
position
We
we
can
can
use
use
a
a
slash
slash
to
to
also
also
specify
specify
its
its
ending
ending
point,
point
which
which
in
in
this
this
case
case
can
can
be
be
figured
figured
out
out
automatically
automatically
by
by
the
the
grid
grid
algorithm.
algorithm
So,
so
the
the
grid
grid
row
row
property
property
is
is
like
like
saying
saying
start
start
here
here
slash
slash
end
end
here.
here
It
it
makes
makes
more
more
sense
sense
when
when
you
you
look
look
at
at
your
your
grid
grid
in
in
Firefox
firefox
and
and
display
display
the
the
grid
grid
line
line
numbers.
numbers
If
if
we
we
look
look
at
at
the
the
first
first
photo,
photo
you
you
can
can
see
see
it
it
starts
starts
at
at
column
column
1
1
row
row
1,
1
then
then
ends
ends
at
at
column
column
2
2
row
row
2.
2
If
if
we
we
want
want
to
to
make
make
this
this
photo
photo
taller,
taller
we
we
can
can
do
do
so
so
explicitly
explicitly
with
with
the
the
grid
grid
row
row
property.
property
Like
like
saying
saying
start
start
at
at
horizontal
horizontal
line
line
1
1
and
and
end
end
at
at
horizontal
horizontal
line
line
4.
4
And
and
now
now
you
you
can
can
see
see
that
that
photo
photo
spans
spans
across
across
3
3
rows
rows
and
and
everything
everything
else
else
was
was
repositioned
repositioned
accordingly.
accordingly
But,
but
since
since
we
we
don't
don't
want
want
to
to
use
use
the
the
line
line
numbers
numbers
explicitly,
explicitly
we'll
we'll
use
use
span
span
2
2
to
to
say
say
start
start
wherever,
wherever
span
span
2
2
rows,
rows
and
and
then
then
automatically
automatically
end
end
wherever.
wherever
So
so
that's
that's
how
how
we
we
can
can
make
make
an
an
item
item
taller.
taller
If
if
we
we
want
want
to
to
make
make
an
an
item
item
wider,
wider
we
we
can
can
use
use
the
the
grid
grid
column
column
property
property
and
and
we
we
can
can
implement
implement
it
it
with
with
the
the
exact
exact
same
same
value.
value
And
and
now,
now
we
we
can
can
go
go
into
into
our
our
HTML
html
and
and
start
start
applying
applying
these
these
classes
classes
to
to
the
the
items.
items
The
the
end
end
result
result
is
is
a
a
responsive
responsive
photo
photo
gallery,
gallery
but
but
there
there
is
is
one
one
slight
slight
problem.
problem
At
at
smaller
smaller
sizes,
sizes
spanning
spanning
2
2
grid
grid
lines
lines
doesn't
doesn't
work
work
very
very
well.
well
Notice
notice
how
how
the
the
items
items
on
on
the
the
right
right
are
are
way
way
too
too
skinny.
skinny
We
we
can
can
easily
easily
fix
fix
this
this
by
by
wrapping
wrapping
our
our
classes
classes
in
in
a
a
media
media
query.
query
This
this
means
means
the
the
classes
classes
will
will
do
do
nothing
nothing
on
on
smaller
smaller
screen
screen
sizes
sizes
and
and
will
will
only
only
be
be
applied
applied
if
if
the
the
min
min
width
width
is
is
greater
greater
than
than
600
600
pixels
pixels
in
in
the
the
viewport.
viewport
And
and
now
now
things
things
will
will
look
look
much
much
better
better
on
on
small
small
devices.
devices
And
and
that
that
brings
brings
us
us
to
to
grid
grid
number
number
3.
3
It
it
has
has
this
this
intro
intro
animation
animation
and
and
notice
notice
how
how
each
each
A
a
grid
grid
item
item
comes
comes
in
in
clockwise
clockwise
until
until
it
it
gets
gets
to
to
the
the
center.
center
You'll
you'll
also
also
notice
notice
the
the
color
color
changes
changes
as
as
it's
it's
being
being
animated
animated
in
in
and
and
the
the
middle
middle
columns
columns
are
are
responsive
responsive
based
based
on
on
the
the
viewport
viewport
size.
size
Now,
now
again,
again
we
we
have
have
the
the
same
same
basic
basic
HTML
html
structure,
structure
just
just
a
a
bunch
bunch
of
of
divs
divs
inside
inside
a
a
grid.
grid
We'll
we'll
set
set
the
the
display
display
to
to
grid,
grid
give
give
it
it
a
a
gap,
gap
but
but
this
this
time
time
we're
we're
went
went
to
to
create
create
an
an
explicit
explicit
grid
grid
using
using
grid
grid
template
template
areas.
areas
This
this
is
is
a
a
really
really
cool
cool
property
property
that
that
allows
allows
you
you
to
to
create
create
an
an
explicit
explicit
grid
grid
by
by
giving
giving
names
names
to
to
the
the
different
different
areas
areas
in
in
the
the
grid.
grid
Notice
notice
how
how
we
we
have
have
the
the
letter
letter
a
a
in
in
the
the
top
top
left
left
and
and
if
if
we
we
follow
follow
that
that
clockwise
clockwise
it
it
goes
goes
all
all
the
the
way
way
to
to
l
l
and
and
then
then
in
in
the
the
middle
middle
we're
we're
actually
actually
using
using
emojis
emojis
to
to
represent
represent
the
the
main
main
content.
content
And
and
A
a
shout
shout
out
out
to
to
Paul
paul
Newton
newton
who
who
commented
commented
on
on
the
the
last
last
video
video
explaining
explaining
how
how
you
you
can
can
get
get
even
even
more
more
abstract
abstract
with
with
your
your
grid
grid
area
area
names.
names
Notice
notice
how
how
he's
he's
using
using
shapes
shapes
to
to
define
define
the
the
grid
grid
areas,
areas
making
making
it
it
extremely
extremely
clear
clear
which
which
part
part
of
of
the
the
UI
ui
each
each
grid
grid
area
area
is
is
for.
for
Now,
now
once
once
you
you
have
have
your
your
grid
grid
template
template
areas
areas
defined,
defined
you
you
can
can
set
set
some
some
sizing
sizing
for
for
the
the
rows
rows
and
and
columns.
columns
In
in
this
this
example,
example
the
the
grid
grid
container
container
has
has
a
a
fixed
fixed
height,
height
so
so
we'll
we'll
have
have
each
each
individual
individual
row
row
take
take
up
up
exactly
exactly
25%
25%
of
of
the
the
height
height
using
using
the
the
repeat
repeat
function.
function
When
when
it
it
comes
comes
to
to
our
our
columns,
columns
we'll
we'll
give
give
the
the
1st
1st
column
column
a
a
fixed
fixed
width,
width
the
the
2
2
middle
middle
columns
columns
an
an
auto
auto
property
property
to
to
automatically
automatically
resize
resize
based
based
on
on
the
the
viewport,
viewport
and
and
then
then
the
the
last
last
column
column
a
a
fixed
fixed
width
width
of
of
also
also
240.
240
Then
then
the
the
next
next
step
step
is
is
to
to
place
place
the
the
children
children
in
in
their
their
appropriate
appropriate
grid
grid
area.
area
Now,
now
because
because
I
i
have
have
all
all
the
the
children
children
laid
laid
out
out
in
in
a
a
logical
logical
order,
order
I'm
i'm
going
going
to
to
use
use
nth
nth
child
child
to
to
select
select
them,
them
but
but
you
you
could
could
definitely
definitely
use
use
your
your
own
own
custom
custom
class
class
names
names
here
here
as
as
well.
well
The
the
important
important
thing
thing
to
to
notice
notice
is
is
that
that
we're
we're
applying
applying
grid
grid
area
area
a
a
to
to
this
this
element.
element
No
no
matter
matter
where
where
it
it
sits
sits
in
in
the
the
container,
container
it
it
will
will
take
take
up
up
that
that
grid
grid
template
template
area
area
you
you
defined
defined
above.
above
Now,
now
we'll
we'll
repeat
repeat
this
this
process
process
for
for
every
every
single
single
area
area
in
in
the
the
grid.
grid
The
the
end
end
result
result
is
is
this
this
grid
grid
with
with
all
all
children
children
in
in
the
the
appropriate
appropriate
spots.
spots
And
and
now,
now
how
how
do
do
we
we
impress
impress
our
our
friends
friends
with
with
this
this
fancy
fancy
staggered
staggered
intro
intro
animation?
animation
Well,
well
the
the
first
first
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
set
set
up
up
a
a
variable
variable
for
for
the
the
staggered
staggered
delay.
delay
This
this
will
will
allow
allow
us
us
to
to
change
change
the
the
timing
timing
without
without
having
having
to
to
manually
manually
update
update
the
the
delay
delay
for
for
all
all
13
13
elements.
elements
Next,
next
we're
we're
going
going
to
to
need
need
a
a
keyframes
keyframes
animation.
animation
If
if
you're
you're
not
not
familiar
familiar
with
with
keyframes,
keyframes
they
they
basically
basically
allow
allow
you
you
to
to
move
move
from
from
one
one
set
set
of
of
properties
properties
to
to
another.
another
From
from
is
is
the
the
starting
starting
point,
point
to
to
is
is
the
the
ending
ending
point.
point
We
we
want
want
to
to
start
start
with
with
an
an
opacity
opacity
of
of
0
0
or
or
invisible,
invisible
a
a
scale
scale
of
of
0.3,
0.3
and
and
then
then
we'll
we'll
also
also
rotate
rotate
the
the
color
color
by
by
a
a
180
180
degrees.
degrees
That's
that's
how
how
I
i
create
create
that
that
rainbow
rainbow
like
like
color
color
change
change
when
when
the
the
items
items
are
are
animated
animated
in.
in
When
when
the
the
animation's
animation's
complete,
complete
the
the
opacity
opacity
should
should
be
be
1,
1
the
the
scale
scale
should
should
be
be
1,
1
and
and
the
the
hue
hue
rotate
rotate
should
should
be
be
0.
0
Now,
now
CSS
css
will
will
automatically
automatically
interpolate
interpolate
between
between
the
the
starting
starting
and
and
ending
ending
values
values
based
based
on
on
the
the
amount
amount
of
of
time
time
that
that
we
we
specify
specify
for
for
the
the
animation.
animation
We
we
can
can
apply
apply
this
this
animation
animation
to
to
all
all
the
the
cards
cards
by
by
setting
setting
it
it
as
as
the
the
animation
animation
name.
name
Then,
then
we'll
we'll
also
also
give
give
it
it
a
a
duration
duration
of
of
700
700
milliseconds
milliseconds
and
and
a
a
timing
timing
function
function
of
of
ease
ease
out.
out
Now,
now
one
one
last
last
important
important
point
point
here
here
is
is
that
that
we
we
also
also
need
need
to
to
set
set
the
the
animation
animation
fill
fill
mode
mode
to
to
backwards.
backwards
This
this
will
will
set
set
the
the
elements
elements
to
to
their
their
first
first
key
key
frame
frame
value
value
which,
which
in
in
our
our
case,
case
will
will
be
be
invisible.
invisible
Otherwise,
otherwise
the
the
cards
cards
would
would
be
be
visible
visible
before
before
the
the
animation
animation
starts
starts
and
and
that
that
just
just
wouldn't
wouldn't
look
look
right
right
at
at
all.
all
That
that
takes
takes
care
care
of
of
the
the
animation,
animation
but
but
now
now
we
we
want
want
to
to
stagger
stagger
it.
it
And
and
We
we
can
can
do
do
that
that
by
by
setting
setting
an
an
animation
animation
delay
delay
on
on
each
each
individual
individual
element.
element
But,
but
we
we
want
want
to
to
do
do
this
this
in
in
a
a
smart
smart
way,
way
so
so
if
if
we
we
decide
decide
to
to
change
change
the
the
delay,
delay
We
we
don't
don't
have
have
to
to
update
update
all
all
13
13
items.
items
To
to
help
help
us,
us
I'm
i'm
going
going
to
to
use
use
the
the
CSS
css
calc
calc
function.
function
It
it
can
can
perform
perform
basic
basic
calculations
calculations
on
on
values.
values
For
for
the
the
first
first
item,
item
we'll
we'll
say
say
1
1
times
times
the
the
stagger
stagger
delay.
delay
For
for
the
the
second
second
item,
item
we'll
we'll
say
say
2
2
times
times
the
the
stagger
stagger
delay
delay
and
and
we'll
we'll
keep
keep
increasing
increasing
that
that
for
for
all
all
13
13
items.
items
And
and
And,
and
there's
there's
still
still
obviously
obviously
a
a
lot
lot
of
of
code
code
duplication
duplication
here,
here
but
but
you
you
could
could
make
make
this
this
much
much
more
more
efficient
efficient
by
by
using
using
something
something
like
like
Sass,
sass
where
where
you
you
can
can
run
run
a
a
programmatic
programmatic
for
for
loop.
loop
And,
and
that's
that's
basically
basically
all
all
there
there
is
is
to
to
it.
it
We
we
now
now
have
have
this
this
unique
unique
animated
animated
grid
grid
without
without
any
any
JavaScript
javascript
or
or
external
external
CSS
css
framework.
framework
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
make
make
sure
sure
to
to
grab
grab
a
a
full
full
source
source
code
code
on
on
FireShip
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the benefits of using CSS Grid for responsive grid design, including avoiding unnecessary code and easy implementation. They then move on to examples of responsive grid design using a base grid and a grid template, including setting display grid and grid image columns, using grid grid row properties to create an explicit grid, and creating a responsive grid by using a template area and keyframes. They also explain how to use the grid for responsive responsive photo gallery, including setting height of rows, creating a responsive grid by using a template area, and using the CSS calc function to set the animation delay and fill mode. Finally, they provide a link for a full source code on Fire KA IO for setting the animation delay and fill mode.
The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts
Today, you'll learn the basics of CSS Grid by building 3 different grid layouts from scratch. The first example is a responsive 12 column grid. It replaces most of the use cases that you'd find in a grid system like Twitter Bootstrap, but it does so with only 3 lines of code and removes the need for all this crazy markup HTML. Next, we'll build a responsive photo gallery. And 3rd, we'll build an explicit grid that has this fancy, staggered intro animation. By by the end of this video, you should know enough about grid to start putting it to use in your own projects. If you're new here, like and subscribe, and feel free to grab your mouse and keyboard to code along with us. When you start, Just have a good feeling and be happy and and love with life and the world and sit down and begin playing. I'd like to start off by sharing my own experience with Grid. Because on Fireship IO, I was previously using a flexbox based system, like you would find in Bootstrap and many other CSS frameworks. Now, there's nothing wrong with using a third party solution, but when you use Grid, you don't have to add any additional CSS to your bundle size. The grid system just works natively in the browser. But, the much more important benefit was how much it simplified the codebase. My HTML markup had a bunch of columns, each with its own collection of classes to make that column responsive. After moving to CSS Grid, I was able to remove all these classes and implement my own grid system with just three lines of code. And on top of that, beautiful designs that you would normally only find in a magazine are much easier to implement with Grid, because the system itself is inspired by print based grids. Now, I should warn you that grid is pretty weird to learn at first. So, let's jump into some examples and understand what every line of code is doing. You can follow along by opening your editor and creating an HTML all in CSS file, or you can clone the project from GitHub and you'll see that each grid is broken down into its own HTML and CSS files. This first grid building is basically an infinite set of responsive columns. And that's really useful if you have something like a feed of cards, like the lesson feed on Fireship IO. And a grid like this, we'll also replace many of the use cases for something like Twitter Bootstrap Grid. Go ahead and open an HTML file in Versus Code, then can start typing HTML to autocomplete the boilerplate code. Next, I'm going to go into the head of the document, add a style tag, and then import our Base CSS as well as our basic grid for this example. The base CSS file is just something that I'm going to share across all the examples. If we open that file, you'll notice that it has a card class that defines a flex box that aligns its content in the center. None of this code is actually required for your grid to work, it's just there to make things look nice, so feel free to copy it from the main repo. Now going back to our HTML, we'll go into the body and set up a section that will serve as our main grid container. Then, all of the immediate children inside of this container are known as grid items. Now, for this demo, I'm adding 12 children to the grid, but I'm assuming the content inside the grid is dynamic. Meaning, we might have 3 items in there, 50 items, or whatever. So what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size. The first step is to set display grid on the container and You'll notice right now, everything is just stacked up in a single column. Let's start by giving our children a little bit of spacing. We can do that with the gap property Instead of setting margins on the children, that will guarantee that we always have 1 REM of spacing between the items both horizontally and vertically. Now, Now, one way to create columns is to use the grid template columns property. Let's start by creating an explicit grid, or a grid that has all of its columns defined in advance. Now, since we're talking about columns, think about the width of the grid. 1 f r or 1 fractional unit represents one part of the available space. Currently, we have 1 column, so 1 f r is a 100% of the available space. We can add another column by simply adding another f r unit. And now 1 f r equals 50% of the available space. And we can keep doing this for as many columns as we need, or in our case, 12 columns. The end result is an explicit grid that always has 12 columns. But there's a few problems here. First of all, this grid is not responsive and this code was really ugly. Fortunately, CSS Grid has a helper function called repeat. Instead of writing out each column manually, we can simply call repeat 12, and then pass in the unit that we want to repeat. This code is identical to the code above, but much more concise and readable. Now, currently in the demo, each column is too thin. Let's look at how we can set a minimum width of 2 40 pixels. We'll try again by repeating 12 columns, but this time use the min max function. This is like saying make sure my columns don't go below 200 pixels in width, but allow them to expand as big as one fractional unit will allow. What you'll notice is that our cards are no longer too skinny, but we now have Another problem. They're overflowing on the horizontal axis. So the question becomes, how do we make these columns break down into additional rows when there's no longer available space? The answer is by creating an implicit grid. When we call repeat, instead of repeating 12 times, we'll repeat with autofit and then use the same min max value you as before. What autofit does is tell grid to calculate the number of rows and columns on the fly. And now you can see that we have a truly responsive grid. It only took 3 lines of code and no additional markup or classes in our HTML. It's worth noting that there's also an autofill option. The difference is subtle, but important. Notice here in the demo how the The top autofill option is going to create additional columns when there becomes additional space, but autofit on the bottom will expand its children to take up all of the available space. Now, Now, when you're working with Grid and things aren't going the way you expect, open up Firefox Dev Tools. It has a really good grid and Flexbox inspector. And, you can see here how it allows me to visualize the lines and tracks on the grid. Now, it's time to move on to example number 2. A responsive mosaic photo gallery. What you'll notice about this example, is that some of the photos are bigger, some are taller, and some are wider. And, they also reposition themselves gracefully when the viewport size changes. Let's start by going into the HTML and setting up a grid container. Inside the container, we have 12 divs like we did in the previous example, but each div has a photo URL as its background. And, by the way, these are free to use photos from Unsplash. Now if we go into the CSS, we'll use the code from the previous example as our starting point, but you'll notice the rows in the grid are very short. That's because they're being automatically sized to the text content in the children. Now, when you have an implicit grid like this, it can be useful to set the size of the row. If we want all of our rows to be exactly 240 pixels tall, we can set the grid auto rows property to that value. And now each automatically created row will be fixed to that height. Now our goal is to change the sizing of individual grid items. Let's create a class called card tall. Any item with this class should span across multiple rows vertically. We can do that with the grid row property and then span2 will tell it to span across 2 rows from its starting position. We can use a slash to also specify its ending point, which in this case can be figured out automatically by the grid algorithm. So, the grid row property is like saying start here slash end here. It makes more sense when you look at your grid in Firefox and display the grid line numbers. If we look at the first photo, you can see it starts at column 1 row 1, then ends at column 2 row 2. If we want to make this photo taller, we can do so explicitly with the grid row property. Like saying start at horizontal line 1 and end at horizontal line 4. And now you can see that photo spans across 3 rows and everything else was repositioned accordingly. But, since we don't want to use the line numbers explicitly, we'll use span 2 to say start wherever, span 2 rows, and then automatically end wherever. So that's how we can make an item taller. If we want to make an item wider, we can use the grid column property and we can implement it with the exact same value. And now, we can go into our HTML and start applying these classes to the items. The end result is a responsive photo gallery, but there is one slight problem. At smaller sizes, spanning 2 grid lines doesn't work very well. Notice how the items on the right are way too skinny. We can easily fix this by wrapping our classes in a media query. This means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport. And now things will look much better on small devices. And that brings us to grid number 3. It has this intro animation and notice how each A grid item comes in clockwise until it gets to the center. You'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size. Now, again, we have the same basic HTML structure, just a bunch of divs inside a grid. We'll set the display to grid, give it a gap, but this time we're went to create an explicit grid using grid template areas. This is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid. Notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to l and then in the middle we're actually using emojis to represent the main content. And A shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names. Notice how he's using shapes to define the grid areas, making it extremely clear which part of the UI each grid area is for. Now, once you have your grid template areas defined, you can set some sizing for the rows and columns. In this example, the grid container has a fixed height, so we'll have each individual row take up exactly 25% of the height using the repeat function. When it comes to our columns, we'll give the 1st column a fixed width, the 2 middle columns an auto property to automatically resize based on the viewport, and then the last column a fixed width of also 240. Then the next step is to place the children in their appropriate grid area. Now, because I have all the children laid out in a logical order, I'm going to use nth child to select them, but you could definitely use your own custom class names here as well. The important thing to notice is that we're applying grid area a to this element. No matter where it sits in the container, it will take up that grid template area you defined above. Now, we'll repeat this process for every single area in the grid. The end result is this grid with all children in the appropriate spots. And now, how do we impress our friends with this fancy staggered intro animation? Well, the first thing I'm going to do is set up a variable for the staggered delay. This will allow us to change the timing without having to manually update the delay for all 13 elements. Next, we're going to need a keyframes animation. If you're not familiar with keyframes, they basically allow you to move from one set of properties to another. From is the starting point, to is the ending point. We want to start with an opacity of 0 or invisible, a scale of 0.3, and then we'll also rotate the color by a 180 degrees. That's how I create that rainbow like color change when the items are animated in. When the animation's complete, the opacity should be 1, the scale should be 1, and the hue rotate should be 0. Now, CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation. We can apply this animation to all the cards by setting it as the animation name. Then, we'll also give it a duration of 700 milliseconds and a timing function of ease out. Now, one last important point here is that we also need to set the animation fill mode to backwards. This will set the elements to their first key frame value which, in our case, will be invisible. Otherwise, the cards would be visible before the animation starts and that just wouldn't look right at all. That takes care of the animation, but now we want to stagger it. And We can do that by setting an animation delay on each individual element. But, we want to do this in a smart way, so if we decide to change the delay, We don't have to update all 13 items. To help us, I'm going to use the CSS calc function. It can perform basic calculations on values. For the first item, we'll say 1 times the stagger delay. For the second item, we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items. And And, there's still obviously a lot of code duplication here, but you could make this much more efficient by using something like Sass, where you can run a programmatic for loop. And, that's basically all there is to it. We now have this unique animated grid without any JavaScript or external CSS framework. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to grab a full source code on FireShip IO. Thanks for watching, and I will see you in the next one.
The speakers discuss the benefits of using CSS Grid for responsive grid design, including avoiding unnecessary code and easy implementation. They then move on to examples of responsive grid design using a base grid and a grid template, including setting display grid and grid image columns, using grid grid row properties to create an explicit grid, and creating a responsive grid by using a template area and keyframes. They also explain how to use the grid for responsive responsive photo gallery, including setting height of rows, creating a responsive grid by using a template area, and using the CSS calc function to set the animation delay and fill mode. Finally, they provide a link for a full source code on Fire KA IO for setting the animation delay and fill mode.