CSS Grid Cheat Sheet Illustrated in 2021🎖️
Tags: css, webdev, beginners, tutorial
Published: 2021-03-04 09:53:30

Today we're gonna learn **CSS Grid** properties so that you can make your own responsive sites. 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 : 
   * [Grid Architecture](#grid-architecture)
   * Parent Properties
      - [grid-template-columns](#grid-template-columns)
      - [grid-template-rows](#grid-template-rows)
      - [grid-template-areas](#grid-template-areas)
      - [column & row gap](#column-row-gap)
      - [justify-items || align-items](#jiai)
      - [justify-content || align-content](#jcac)
   * Children Properties
      - [grid-column : start/end](#g-c-s-e)
      - [grid-row : start/end](#g-r-s-e)
      - [grid-area](#grid-area)
      - [justify-self || align-self](#jsas)
   * [Short Hands](#sh)
   * [Conclusion](#conclusion)



## You can watch this tutorial on YouTube as well if you like:

{% youtube VXW1r09Y6Tw %}


# First, What is Grid?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e3wc9k9qxw07o54e38x.png)

Grid is a blueprint for making websites. 

The Grid model allows us to layout the content of our website. Not only that, it helps us create the structures needed for creating responsive websites for multiple devices.


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

### Desktop View

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuz7de20oxw7t8kmid4s.png)

### Mobile View 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wqtabiihl0kexxdbvht.png)

# Grid Architecture <a name="grid-architecture"></a>

So how does Grid architecture work? The Grid items [Contents] are distributed along the main axis and cross axis. Using various Grid properties, we manipulate the items to create our website layouts.
   
![Grid Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9qs07pm0a8s20scr6wr.png)

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

#### Here's a CheatSheet I made for [Flexbox](https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/) 




# Grid Chart --

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3oecuzn41ee3gj4o1ny.png)

This chart contains every possible property you can use when using grid. Grid properties are divided into -
   * Parent properties
   * Children Properties

**Note :** The red colored text are the shorthand properties 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n93mkan7du7wz3zyibtw.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g3msf9v3yw9qjpzkvj7.png)

At 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


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c9bfd2puec1wjuk063k.png)


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" & Open VS Code
   2. Create index.html and style.css files
   3. Install Live Server and run it.

Or, you can just open [Codepen](https://codepen.io) 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. 😊

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfjntw9islnyhv6mkigq.png)




## HTML

create 3 boxes inside our body tag. Like this 👇

```HTML
<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 our default browser styles. Follow me 👇

```CSS
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
```

### Step-2

Inside the body selector, do these adjustments 

```CSS
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 ->

```CSS
[class^="box-"] {
  background-color: skyblue;

/* To place the letter at the center */
  display: grid;
  place-items: center;
}
```

**Note :** Don't worry, we'll discuss about those grid properties in details. 

### Step-4

Now, place some gap between our boxes like this 👇

```CSS
.container {
  display: grid;
  gap: 20px;
}
```





## But Wait....

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq8exwor5aiciu2j6jwu.png)

Before starting, you need to understand the relationship between parent & child classes.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzq3w0bys78fveqb9z0z.png)

For the Grid Parent property, we will write inside .container class. For the Grid Children Property, we will write on .box-* classes



# Grid Parent Properties

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwnmeomlyekzuov7tcml.png)

First, Let's learn The grid Parent properties !














# grid-template-columns <a name="grid-template-columns"></a>

This is used to define the **Number & Width** of columns. You can either individually set the width of each column, or set an uniform width for all columns using "repeat()" function.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu3jedhac2u0onuan6go.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mov0pc7djie6gbj7m25g.png)



To recreate these results, Write on CSS These lines ->


```CSS
.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 available space.
   * if you use fr (fraction unit) measurement, all the boxes will be equal in size


# grid-template-rows <a name="grid-template-rows"></a>

This is used to define the **Number & Height** of rows. You can either individually set the height of each row, or set an uniform height for all rows using "repeat()" function.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r78wfrp3rr4mmn3507ym.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elpj9jw29ydlwao1yb3q.png)


To test these results, Write on CSS These lines ->

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

/* Change the values  👇 to experiment */
  grid-template-rows: 200px auto 100px;
}
```


# grid-template-areas <a name="grid-template-areas"></a>

This is used to specify the amount of space a grid cell should carry in terms of column & row across the parent container. Life's Quite Easier With this as it allows us to see visually what we're doing.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nw9e0e1wk96wg3uq99f.png)

#### Call it, the blueprint(template) of our layout👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nffhbw0eho476i535eyu.png)


To experiment with this, you need to understand both the parent and children property -
   * **grid-template-areas :** The parent property who will create the blueprint 
   * **grid-area :** the children property who will follow the blueprint. 

### First, create the blueprint

Like this 👇 inside the parent .container class

```CSS
.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 children .box-* classes and set the values like this ->

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

**Note :** The grid-area property will be discussed again on the grid children property section 

# column-gap : <a name="column-row-gap"></a>

This property is used to place gap between **Columns** inside the grid 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa59gtskckoh7ms1uk1h.png)


To test This, write 👇

```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


# row-gap :

This property is used to place gap between **Rows** inside the grid 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw6l38lydlag1dtzw9j8.png)

let's test This 👇

```CSS
.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














# justify-items : <a name="jiai"></a>

This is used to position grid-items (children) inside grid container along the **X-Axis[Main Axis]**. The **4** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oka32lvb2i0lrhcb8p4e.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r2jv92rgp3514fsp4ft.png)


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

```HTML
<div class="container">

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

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

and in css ->

```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;
}
```



# align-items :

This is used to position grid-items (children) inside grid container along the **Y-Axis[Cross Axis]**. The **4** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abl60fsmjuys1kadh1ig.png)


Don't change anything on HTML, write in css ->

```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
  align-items: center;
}
```

# justify-content : <a name="jcac"></a>

This is used to position our grid [Basically everything] inside grid container along the **X-Axis[Main Axis]**. The **7** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9a8eovy1t3i8x5yii4i.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onq2gubifwog2rccclqe.png)

Don't change anything on HTML, write in css ->


```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-content: center;
}
```


# align-content :

This is used to position our grid [Basically everything] inside grid container along the **Y-Axis[Cross Axis]**. The **7** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfgzxrhe2ca4mzk1ies1.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1rjvr4bvwsc8ceevq96.png)


Don't change anything on HTML, write in css ->

```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
  align-content : center;
}
```





# Take a Break

So far so good! Take a break, You deserve it !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xanzksehasqcwc8qm8fw.png)









# Grid Children Properties <a name=""></a>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2k1muu9oldsp02aigvx.png)

Now, Let's look at grid children properties 

# The Grid Scale <a name="grid-scale"></a>

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie4paaplgo8rwf4fd41o.png)

You'll get a clear picture of this guide ☝️ when we write code in just a short moment

The illustration below 👇 shows the start & end points of row and column of a single cell.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bumrjjy06owkahoe49y3.png)


### HTML 

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

```HTML
<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. What it does is, it repeats our code to a certain time. Here's an example 👇

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

This is ☝️ equivalent to writing this 👇

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

#### A Quick Note :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2q151726koc8h8mp0ht.png)

When we use the fr [ Fraction ] unit, we are dividing the screen area into equal proportions.

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

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



We're set, let's start !

















# grid-column : start/end <a name="g-c-s-e"></a>

THESE 2 properties are used to join multiple **COLUMNS** together. It is a shorthand of 2 properties -
   * **grid-column-start**
   * **grid-column-end** 



Write these on CSS

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

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

The result - 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2pt6zzl39mvjkv6h1m2.png)

Here, we are dividing our screen [ both width & 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.

As we are dealing with children properties, we need to target our .box-* classes like this - 

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

You can experiment with any 1 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie4paaplgo8rwf4fd41o.png)


The default scale of every .box-* classes are 

```CSS
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 👇

```CSS
grid-column : span 1;
```

Let's assign the empty 8 fractions to .box-1 like this 👇

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


The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgcg4yyxourlpk1b6z3m.png)

### A Quick note :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g10ckpo6g3tpn8e9kkpw.png)

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, must add 1 to indicate the end so, 8+1+1 = 10

### Using the Span keyword

If You're confused by the 1st one, you can use this as it is easy to understand.

We need to add 8 boxes to .box-1 which is already occupying 1 box. So, we have to do 8+1 = 9

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

This is gonna output the same result


# grid-row : start/end <a name="g-r-s-e"></a>

THESE 2 properties are used to join multiple **ROWS** together. It is a shorthand of 2 properties - 
   * **grid-row-start**
   * **grid-row-end**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie4paaplgo8rwf4fd41o.png)


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


Write these 👇

```CSS
.box-1{
  grid-row : 1/11;
}
```
The calculation -> .box-1 holds 1 box, and add 9 more boxes, add mandatory 1 at last to indicate the end 9+1+1=11

The alternative 👇 using the span keyword

```CSS
.box-1{
  grid-row : span 10;
}
```

The calculation -> .box-1 holds 1 box, and add 9 more boxes 
 9+1=10

The result so far 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqkoglmoh1whcyve7uad.png)


# grid-area : <a name="grid-area"></a>

At first, we need to setup [grid-template-areas](#grid-template-areas) ☝️ Once done, we have to specify the names used in parent class inside the children classes, like this👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcoalgwdeiogd3tmazzf.png)



Specifying grid-template-areas inside parent container 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r84bvxt5230jyr5pydt.png)

Like this 👇 inside parent class

```CSS
.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";
}
```

specifying the names used in parent container inside children classes with grid-areas👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffwg22949ogu0m2bw3sn.png)

Like this 👇 inside children classes

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

# Justify-self : <a name ="jsas"></a>

This is used to position **1 individual** grid-item (children) inside grid container along the **X-Axis[Main Axis]**. The **4** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g21475dm64kw2vyqgxvd.png)

Write these to experiment with the values 👇

```CSS
.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 children classes. So, target any .box-* class. I'll target the 1st box 

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

# align-self : 

This is used to position **1 individual** grid-item (children) inside grid container along the **Y-Axis[Cross Axis]**. The **4** values are 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr5dlqehevjclxys3bx6.png)

Let's Experiment with the values 👇


```CSS
.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 children classes. So, target any .box-* class. I'll target the 1st box 

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




























# Short Hands <a name="sh"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6s9qvnvjtwbj7r1ash6.png)

Let's look at these Grid Short-Hand Properties -
   * place-content
   * place-items
   * place-self
   * grid-template
   * gap / grid-gap

# place-content :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz1dydjbbgxw8bxt86i4.png)

this is the shorthand of 2 properties -
   * align-content
   * justify-content

#### An example 

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

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

```

# place-items :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvu44ujney5ixzvzedbb.png)

this is the shorthand of 2 properties -
   * align-items
   * justify-items

#### An example 

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

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

# place-self :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jafsak8hqgfb78hbxs0b.png)

this is the shorthand of 2 properties -
   * align-self
   * justify-self

#### An example 

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

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

# grid-template : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlratlmwgt0vvknnt82w.png)



this is the shorthand of 2 properties -
   * grid-template-rows
   * grid-template-columns

#### An example 

```CSS
grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

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

# gap/grid-gap :

gap & grid-gap are the same thing and does the same work. You can use any 1 of them.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brubmtmvt2jvq1l9f1ep.png)



this is the shorthand of 2 properties -
   * row-gap
   * column-gap

#### An example 

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

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


## Credits

   * [Unicorns](Flaticon.com/packs/unicorn-4)
   * [Corgis](https://www.freepik.com/free-vector/cute-corgi-drink-milk-tea-boba-cartoon-vector-illustration-animal-drink-concept-isolated-vector-flat-cartoon-style_10336142.htm#position=13), [kat](https://www.freepik.com/free-psd/pet-food-banner-template_13762522.htm#position=1)

![Credits](https://dev-to-uploads.s3.amazonaws.com/i/uzo5e477tn0sc4oz3mec.png)

## Read Next : 

{% link https://dev.to/joyshaheb/master-css-flexbox-2021-build-5-responsive-layouts-css-2021-3n9k %}

{% link https://dev.to/joyshaheb/acing-css-grid-model-in-2021-with-5-exercises-css-2021-51ci %}

# Conclusion <a name="conclusion"></a>

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)




   * **YouTube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **LinkedIn[ / Joy Shaheb](https://www.linkedin.com/in/joyshaheb/)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**