Forum Donate

Learn to code — free 3,000-hour curriculum

JUNE 8, 2021 / #CSS GRID

Complete CSS Grid Tutorial

with Cheat Sheet
Joy Shaheb
🎖️
Today we're going to learn CSS Grid properties so
that you can make your own responsive websites. I'll
explain how each of Grid's properties work along
with a CheatSheet that covers everything you can
do with Grid. Let's go. 🎖️
Table of Contents:
CSS Grid Architecture

CSS Grid Chart

Grid Parent Properties

grid-template-columns

grid-template-rows

grid-template-areas

How to create column and row gaps in Grid

How to justify items and align items with Grid

How to justify content and align-content with Grid

Child Properties in CSS Grid

grid-column : start/end

grid-row : start/end
 grid-area Forum Donate
justify-self || align-self
Learn to code — free 3,000-hour curriculum

Shorthand for Grid

Conclusion

You can watch this tutorial on

YouTube as well if you like:

Complete Grid Tutorial with Cheat Sheet 2021 🎖️ || CSS …

First, What is CSS Grid?

Grid is a blueprint for making websites.

The Grid model allows you to layout the content ofForum
your website.
Donate
Not only that, it helps you create the structures you need for
Learn to code — free 3,000-hour curriculum
building responsive websites for multiple devices. This means
your site will look good on desktop, mobile, and tablet.

Here's a simple demo which I created using Grid as the main

blueprint.

Desktop View

Mobile View
 Forum Donate

Learn to code — free 3,000-hour curriculum

CSS Grid Architecture

So how does Grid architecture work? The Grid items [Contents]
are distributed along the main axis and cross axis. Using various
Grid properties, you can manipulate the items to create your
website layouts.
 Forum Donate

Learn to code — free 3,000-hour curriculum

grid architecture

By the way, you can join multiple rows and columns, just like in
Excel software, which gives you more flexibility and options than
Flexbox.

By the way, here's a CheatSheet I made for Flexbox if you want to

learn more about that.

CSS Grid Chart

This chart contains every possible property you can use when
using grid. Grid properties are divided into:
 Parent properties Forum Donate
Child Properties
Learn to code — free 3,000-hour curriculum

Note: The red colored text denotes the shorthand properties:

By the end of this tutorial, you'll have a clear understanding of

how to use all of those properties.

How to Set Up the Project

 Forum Donate

Learn to code — free 3,000-hour curriculum

For this project, you need to know little bit of HTML, CSS, and
how to work with VS code. Follow along with me as we complete
the following tasks:

1. Create a folder named "Project-1" and Open VS Code

2. Create index.html and style.css files

3. Install Live Server and run it.

Or, you can just open Codepen and start coding.

At the end of this tutorial, you will be able to make accurate and
beautiful website layouts.

And...we're all set! Let's start coding. 😊

HTML
Create three boxes inside the body tag, like this 👇Forum Donate

Learn to code — free 3,000-hour curriculum

<div class="container">
<div class="box-1"> A </div>
<div class="box-2"> B </div>
<div class="box-3"> C </div>
</div>

CSS
Step 1
Let's clear out our default browser styles. Follow me 👇
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

Step 2
Inside the body selector, do these adjustments:

body {
font-family: sans-serif;
font-size: 40px;
width: 100%;
min-height: 100vh;
}

Step 3
Now, let's style our boxes by selecting all of them together ->
 [class^="box-"] {
Forum Donate
background-color: skyblue;
Learn to code — free 3,000-hour curriculum
/* To place the letter at the center */
display: grid;
place-items: center;
}

Note: Don't worry, we'll discuss those grid properties in detail

later.

Step 4
Now, place some gaps between our boxes like this 👇
.container {
display: grid;
gap: 20px;
}

But Wait....

Before starting, you need to understand the relationship between

parent and child classes.
 Forum Donate

Learn to code — free 3,000-hour curriculum

For the Grid parent property, we will write inside the .container
class. For the Grid child property, we will write in the .box-*
classes.

CSS Grid Parent

Properties

First, let's learn about CSS Grid's parent properties!

The grid-template-columns
property
You use this property to define the number and width of columns.
You can either individually set the width of each column, or set a
uniform width for all columns using the repeat() function.
Forum Donate

Learn to code — free 3,000-hour curriculum

grid-template-columns

To recreate these results, write the following CSS lines ->

.container {
display: grid;
gap: 20px;

/* Change the values 👇to experiment */

grid-template-columns: 200px auto 100px;
}

Note:

The pixel values will be an exact measurement. The "auto"

keyword will cover the available space.

If you use fr (fraction unit) as a unit of measurement, all

the boxes will be equal in size.
 Forum Donate
The grid-template-rows property
Learn to code — free 3,000-hour curriculum
You use this property to define the number and height of rows.
You can either individually set the height of each row, or set a
uniform height for all rows using the repeat() function.

grid-template-rows
To test these results, write the following CSS code Forum
-> Donate

Learn to code — free 3,000-hour curriculum

.container {
display: grid;
gap: 20px;
height: 100vh;

/* Change the values 👇 to experiment */

grid-template-rows: 200px auto 100px;
}

The grid-template-areas property

You use this property to specify the amount of space a grid cell
should carry in terms of columns and rows across the parent
container. Life's much easier with this property as it allows us to
see visually what we're doing.

Standard 12X12 layout

Call it the blueprint(template) of our layout 👇

The blueprint

To experiment with this, you need to understand both the parent

and child properties:

grid-template-areas: The parent property that will create

the blueprint
 grid-area: the child property that will follow the blueprint. Donate
Forum
Learn to code — free 3,000-hour curriculum

First, create the blueprint

Like this 👇 inside the parent .container class:
.container {
display: grid;
gap: 20px;
height: 100vh;

grid-template-areas:
"A A A A A A A A A A A A"
"B B B B B B B B B B C C"
"B B B B B B B B B B C C";
}

Implement the blueprint

Target all our child .box-* classes and set the values like this ->

.box-1{
grid-area: A;
}
.box-2{
grid-area: B;
}
.box-3{
grid-area: C;
}

Note: I'll discuss the grid-area property again in the grid child
property section.

The column-gap property

You use this property to place a gap between Columns inside the
grid 👇
 Forum Donate

Learn to code — free 3,000-hour curriculum

column-gap

To test this, write the following in CSS 👇

.container {
display: grid;
height: 100vh;

grid-template-columns: 100px 100px 100px;

//Change values 👇
to experiment
column-gap: 50px;
}

Note: column-gap works with grid-template-columns.

The row-gap property

You use this property to place a gap between Rows inside the grid
👇

row gap

Let's test this 👇

.container {
display: grid;
height: 100vh;

grid-template-rows: 100px 100px 100px;

// Change 👇 values to experiment
row-gap: 50px;
}
Note: row-gap works with grid-template-rows. Forum Donate

Learn to code — free 3,000-hour curriculum

The justify-items property

You use this property to position grid-items (children) inside grid
containers along the X-Axis [Main Axis]. The 4 values are 👇

justify-items

If you want to test this, then add 1 more box inside the HTML ->

<div class="container">

<!--Other boxes - A, B, C are here-->

<div class="box-4"> D </div>

</div>

and in the CSS ->

.container {
display: grid;
gap: 50px;
height: 100vh;

// each box is 200px by 200px

grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;

// Change values 👇 to experiment

justify-items : end;
}
The align-items property Forum Donate

Learn to code
You use this property — free 3,000-hour
to position grid-itemscurriculum
(children) inside the
grid container along the Y-Axis [Cross Axis]. The 4 values are 👇

align-items

Don't change anything in the HTML, but in the CSS write ->

.container {
display: grid;
gap: 50px;
height: 100vh;

// each box is 200px by 200px

grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;

// Change values 👇 to experiment

align-items: center;
}

The justify-content property

You use this property to position your grid [Basically everything]
inside the grid container along the X-Axis [Main Axis]. The 7
values are 👇

justify-content

Don't change anything in the HTML, but in the CSS write ->
 Forum Donate
.container {
Learn to code — free 3,000-hour curriculum
display: grid;
gap: 50px;
height: 100vh;

// each box is 200px by 200px

grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;

// Change values 👇 to experiment

justify-content: center;
}

The align-content property

You use this property to position our grid [Basically everything]
inside the grid container along the Y-Axis [Cross Axis]. The 7
values are 👇

align-content

Don't change anything in the HTML, but in the CSS write ->

.container {
display: grid;
gap: 50px;
height: 100vh;

// each box is 200px by 200px

grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px;

// Change values 👇 to experiment

align-content : center;
}
 Forum Donate
Take Learn
a Break
to code — free 3,000-hour curriculum
So far so good! Take a break, you deserve it.

CSS Grid Child Properties

Now, let's look at Grid child properties.

The CSS Grid Scale

I made this grid scale to demonstrate the calculations of how
rows and columns are joined together. We can use any 1 of the 2
types of measurement:

The digit [1,2,3,4, etc...]

The span keyword

The Grid Scale

You'll get a clear picture of how this guide works ☝️ when we

write code in just a short moment.

The illustration below 👇 shows the start and end points of rows
and columns of a single cell.
 Forum Donate

Learn to code — free 3,000-hour curriculum

Grid column & row -> start & end points

HTML
To experiment with the grid scale and understand the following
properties, make 4 boxes inside body tag:

<div class="container">
<div class="box-1"> A </div>
<div class="box-2"> B </div>
<div class="box-3"> C </div>
<div class="box-4"> D </div>
</div>

We're gonna utilize the repeat() function. It repeats our code a

certain number of times. Here's an example 👇
grid-template-columns : repeat(5,1fr);

This ☝️ is the equivalent to writing this:👇

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;

A Quick Note
When we use the fr [ Fraction ] unit, we are dividingForum
the screen Donate
area into equal proportions.
Learn to code — free 3,000-hour curriculum

grid-template-columns: repeat(5, 1fr);

This ☝️ code is dividing our screen width into 5 equal parts.

We're set, let's start!

The grid-column: start/end

properties
You use these two properties to join multiple COLUMNS
together. It is a shorthand of 2 properties:

grid-column-start

grid-column-end

Write this code in your CSS:

.container {
display: grid;
gap: 20px;
height: 100vh;

grid-template-columns: repeat(12, 1fr);

grid-template-rows: repeat(12, 1fr);
}

The result looks like this:

Here, we are dividing our screen [ both width and height ] into 12
equal parts. 1 box is occupying 1 part, or you can call it 1fr [ 1
fraction ]. The remaining 8 fractions along the width are empty. Donate
Forum
Learn to code — free 3,000-hour curriculum
As we are dealing with child properties, we need to target our
.box-* classes like this:

.box-1{}
.box-2{}
.box-3{}
.box-4{}

You can experiment with any or all of these boxes, I'll stick with
.box-1 .

Let's bring our grid scale. We are dealing with columns – just
focus on the columns, not rows.

The Grid Scale

The default scale of every .box-* class is:

grid-column-start : 1;
grid-column-end : 2;

/* The shorthand -> */

grid-column : 1 / 2

We can write this ☝️ in the span unit as well, like this 👇

grid-column : span 1;
Let's assign the empty 8 fractions to .box-1 like this👇
Forum Donate

Learn to code — free 3,000-hour curriculum

.box-1{
grid-column : 1/10
}

The result looks like this: 👇

A quick note

How did I do the calculation? The box-1 occupies 1 box itself.

And over that, we are adding more 8 boxes. At the last, you must
add 1 to indicate the end so, 8+1+1 = 10.

How to use the span keyword

If you're confused by the first property, you can use the span
keyword as it is easier to understand.

We need to add 8 boxes to .box-1 which already occupies one

box. So, we have to do 8+1 = 9.

.box-1{
grid-column : span 9;
}

This is gonna output the same result.

The grid-row: start/end properties

You use these two properties to join multiple ROWS together. ItDonate
Forum
is shorthand of 2 properties:
Learn to code — free 3,000-hour curriculum

grid-row-start

grid-row-end

Let's experiment with it! Here, I'll stick with .box-1, and here's our
grid guide. Now, only focus on the row scale, not the column.

The Grid Scale

Let's join 9 boxes to .box-1 along the row.

Write this code: 👇

.box-1{
grid-row : 1/11;
}

The calculation looks like this -> .box-1 holds 1 box, and you add
9 more boxes, plus a mandatory 1 at the last position to indicate
the end which gives you 9+1+1=11.

Here's the alternative 👇 using the span keyword:

.box-1{
grid-row : span 10;
}
And here's that calculation -> .box- 1 holds 1 box,Forum
and you add 9
Donate
more boxes
Learn to code — free 3,000-hour curriculum
9+1=10.

Here's the result so far: 👇

The grid-area property

First, we need to setup grid-template-areas ☝️ Once we've done
that, we have to specify the names used in parent class inside the
children classes, like this: 👇

Standard 12X12 layout

Then we need to specify grid-template-areas inside parent

container: 👇

Like this 👇 inside the parent class:

.container {
display: grid;
gap: 20px;
height: 100vh;

grid-template-areas:
"A A A A A A A A A A A A"
"B B B B B B B B B B C C"
 "B B B B B B B B B B C C";
}
Forum Donate

Learn to code — free 3,000-hour curriculum

Then we specify the names used in the parent container inside

the child classes with grid-areas 👇

Like this 👇 inside the children classes:

.box-1{
grid-area: A;
}
.box-2{
grid-area: B;
}
.box-3{
grid-area: C;
}

The justify-self property

You use this property to position 1 individual grid-item (child)
inside a grid container along the X-Axis [Main Axis]. The 4 values
are 👇

Justify-self

Write this code to experiment with the values 👇

.container {
display: grid;
gap :25px;
height: 100vh;
 /* // each box has equal size */
Forum Donate
grid-template-rows: 1fr 1fr;
Learn to code — free 3,000-hour curriculum
grid-template-columns: 1fr 1fr;
}

Remember! This only works on the child classes. So, target any
.box-* class. I'll target the first box:

.box-1 {
/* Change values 👇 to experiment */
justify-self : start;
}

The align-self property

You use this property to position 1 individual grid-item (child)
inside a grid container along the Y-Axis [Cross Axis]. The 4 values
are 👇

align-self

Let's experiment with the values 👇

.container {
display: grid;
gap :25px;
height: 100vh;

/* // each box has equal size */

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
Remember! This only works on the child classes. So, target any Donate
Forum
.box-* class. I'll target the 1st box:
Learn to code — free 3,000-hour curriculum

.box-1 {
/* Change values 👇
to experiment */
align-self : start;
}

Shorthand for CSS Grid

Properties

Let's look at these Grid shorthand properties:

place-content

place-items

place-self

grid-template

gap / grid-gap

place-content

place-content

This is the shorthand of 2 properties:

align-content

justify-content
An example Forum Donate

Learn to code — free 3,000-hour curriculum

align-content : center;
justify-content : end;

/* The shorthand */
place-content : center / end ;

place-items

place-items

This is the shorthand of 2 properties:

align-items

justify-items

An example

align-items : end;
justify-items : center;

/* The shorthand */
place-items : end / center ;

place-self

place-self

This is the shorthand of 2 properties:

 align-self Forum Donate
justify-self
Learn to code — free 3,000-hour curriculum

An example

align-self : start ;
justify-self : end ;

/* The shorthand */
place-self : start / end ;

grid-template

grid-template

This is the shorthand of 2 properties:

grid-template-rows

grid-template-columns

An example

grid-template-rows : 100px 100px;

grid-template-columns : 200px 200px;

/* The shorthand */
grid-template : 100px 100px / 200px 200px;

gap/grid-gap
Gap and grid-gap are the same thing and do the same work. You
can use either of them.
 gap
Forum Donate

Learn to code — free 3,000-hour curriculum

This is the shorthand of 2 properties:

row-gap

column-gap

An example

row-gap : 20px ;
column-gap : 30px ;

/* The shorthand */
gap : 20px 30px;

Credits
Unicorns

Corgis, kat

Conclusion
Now, you can confidently make responsive website layouts using
your grid knowledge!

Here's your medal for reading until the end ❤️

Suggestions & Criticisms Are
Highly Appreciated ❤️
YouTube / Joy Shaheb
 LinkedIn / Joy Shaheb Forum Donate

Learn to code — free 3,000-hour curriculum

Twitter / JoyShaheb

Instagram / JoyShaheb

Joy Shaheb
Joy is an experienced Senior Frontend Developer and a mentor based in Dhaka,
Bangladesh. He is highly enthusiastic about javascript & He is on a mission to
create the best web dev tutorials online

If you read this far, tweet to the author to show them you care.
Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum

has helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United

States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating
thousands of videos, articles, and interactive coding lessons - all freely available to the
public. We also have thousands of freeCodeCamp study groups around
Forumthe world. Donate

Donations to freeCodeCamp gocode

Learn to toward our education
— free initiatives,
3,000-hour and help pay for servers,
curriculum
services, and staff.

You can make a tax-deductible donation here.

Trending Guides

JS Substring Tutorial UX vs UI

Bubble Sort Algorithm VLOOKUP in Excel

HTML Background Image Big O Cheatsheet

What is Data Science? Git Rename Branch

SQL Subquery in SELECT Excel Pivot Table

Rename a File in Linux What is Alt Text?

Git Remove Last Commit HTML Dropdown Menu

What is a Java Hashmap? Python Reverse List

CRUD Operations Defined Compare Arrays in JS

Git Push Local to Remote HTML Background Color

Lowercase a String in JS Python Dict Comprehension

Data Visualization Tools Restart Kernel in Windows

CSS Selectors Cheatsheet Computer Programmer Salary

Sort Dict by Value Python Dual Boot Windows + Ubuntu

Change Text Color in HTML What is Information Systems?

Our Charity

About Alumni Network Open Source Shop Support Sponsors

Academic Honesty Code of Conduct Privacy Policy Terms of Service

Copyright Policy