DEV Community

Cover image for CSS Grid Cheat Sheet Illustrated in 2021πŸŽ–οΈ
Joy Shaheb
Joy Shaheb

Posted on • Updated on • Originally published at freecodecamp.org

CSS Grid Cheat Sheet Illustrated in 2021πŸŽ–οΈ

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 :

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

First, What is Grid?

Alt Text

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

Mobile View

Alt Text

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, we manipulate the items to create our website layouts.

Grid Architecture

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

Grid Chart --

Alt Text

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

Alt Text

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

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

HTML

create 3 boxes inside our body tag. Like this πŸ‘‡

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

CSS

Step-1

Let's clear our default browser styles. Follow me πŸ‘‡

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Step-2

Inside the body selector, do these adjustments

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

Step-3

Now, Let's style our boxes by selecting all of them together ->

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

/* To place the letter at the center */
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

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

Step-4

Now, place some gap between our boxes like this πŸ‘‡

.container {
  display: grid;
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

But Wait....

Alt Text

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

Alt Text

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

First, Let's learn The grid Parent properties !

grid-template-columns

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

Alt Text

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

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

/*  Change the values     πŸ‘‡ to experiment */
  grid-template-columns: 200px auto 100px;
}
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

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

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

/* Change the values  πŸ‘‡ to experiment */
  grid-template-rows: 200px auto 100px;
}
Enter fullscreen mode Exit fullscreen mode

grid-template-areas

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

Call it, the blueprint(template) of our layoutπŸ‘‡

Alt Text

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

.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";
}
Enter fullscreen mode Exit fullscreen mode

Implement the blueprint

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

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}
Enter fullscreen mode Exit fullscreen mode

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

column-gap :

This property is used to place gap between Columns inside the grid πŸ‘‡

Alt Text

To test This, write πŸ‘‡

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

  grid-template-columns: 100px 100px 100px;
//Change valuesπŸ‘‡ to experiment
  column-gap:  50px;
}
Enter fullscreen mode Exit fullscreen mode

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

row-gap :

This property is used to place gap between Rows inside the grid πŸ‘‡

Alt Text

let's test This πŸ‘‡

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

  grid-template-rows: 100px 100px 100px;
// Change   πŸ‘‡  values to experiment
  row-gap:  50px;
}
Enter fullscreen mode Exit fullscreen mode

Note : row-gap works with grid-template-rows

justify-items :

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

Alt Text

Alt Text

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

<div class="container">

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

  <div class="box-4"> D </div>
</div>
Enter fullscreen mode Exit fullscreen mode

and in 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;
}
Enter fullscreen mode Exit fullscreen mode

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

Don't change anything on HTML, write in 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;
}
Enter fullscreen mode Exit fullscreen mode

justify-content :

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

Alt Text

Alt Text

Don't change anything on HTML, write in 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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Don't change anything on HTML, write in 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;
}
Enter fullscreen mode Exit fullscreen mode

Take a Break

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

Alt Text

Grid Children Properties

Alt Text

Now, Let's look at grid children properties

The 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

Alt Text

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

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>
Enter fullscreen mode Exit fullscreen mode

We're gonna utilize the repeat() function. What it does is, it repeats our code to a certain time. Here's an example πŸ‘‡

grid-template-columns : repeat(5,1fr);
Enter fullscreen mode Exit fullscreen mode

This is ☝️ equivalent to writing this πŸ‘‡

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;
Enter fullscreen mode Exit fullscreen mode

A Quick Note :

Alt Text

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

  grid-template-columns: repeat(5, 1fr);
Enter fullscreen mode Exit fullscreen mode

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

We're set, let's start !

grid-column : start/end

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

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

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
Enter fullscreen mode Exit fullscreen mode

The result -

Alt Text

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 -

.box-1{}
.box-2{}
.box-3{}
.box-4{}
Enter fullscreen mode Exit fullscreen mode

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

The default scale of every .box-* classes are

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

/* The shorthand -> */
 grid-column : 1 / 2
Enter fullscreen mode Exit fullscreen mode

We can write this ☝️ in the span unit as well, like this πŸ‘‡

grid-column : span 1;
Enter fullscreen mode Exit fullscreen mode

Let's assign the empty 8 fractions to .box-1 like this πŸ‘‡

.box-1{
grid-column : 1/10
}
Enter fullscreen mode Exit fullscreen mode

The result πŸ‘‡

Alt Text

A Quick note :

Alt Text

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

.box-1{
  grid-column : span 9;
}
Enter fullscreen mode Exit fullscreen mode

This is gonna output the same result

grid-row : start/end

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

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

Write these πŸ‘‡

.box-1{
  grid-row : 1/11;
}
Enter fullscreen mode Exit fullscreen mode

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

.box-1{
  grid-row : span 10;
}
Enter fullscreen mode Exit fullscreen mode

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

The result so far πŸ‘‡

Alt Text

grid-area :

At first, we need to setup grid-template-areas ☝️ Once done, we have to specify the names used in parent class inside the children classes, like thisπŸ‘‡

Alt Text

Specifying grid-template-areas inside parent container πŸ‘‡

Alt Text

Like this πŸ‘‡ inside 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";
}
Enter fullscreen mode Exit fullscreen mode

specifying the names used in parent container inside children classes with grid-areasπŸ‘‡

Alt Text

Like this πŸ‘‡ inside children classes

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}
Enter fullscreen mode Exit fullscreen mode

Justify-self :

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

Write these to 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;
}
Enter fullscreen mode Exit fullscreen mode

Remember ! This only works on the children classes. So, target any .box-* class. I'll target the 1st box

.box-1 {
/*  Change values πŸ‘‡  to experiment */
  justify-self : start;  
}
Enter fullscreen mode Exit fullscreen mode

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

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;
}
Enter fullscreen mode Exit fullscreen mode

Remember ! This only works on the children classes. So, target any .box-* class. I'll target the 1st box

.box-1 {
/*  Change values πŸ‘‡  to experiment */
  align-self : start;  
}
Enter fullscreen mode Exit fullscreen mode

Short Hands

Alt Text

Let's look at these Grid Short-Hand Properties -

  • place-content
  • place-items
  • place-self
  • grid-template
  • gap / grid-gap

place-content :

Alt Text

this is the shorthand of 2 properties -

  • align-content
  • justify-content

An example

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

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

Enter fullscreen mode Exit fullscreen mode

place-items :

Alt Text

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 ;
Enter fullscreen mode Exit fullscreen mode

place-self :

Alt Text

this is the shorthand of 2 properties -

  • align-self
  • justify-self

An example

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

/* The shorthand */
place-self : start / end ;
Enter fullscreen mode Exit fullscreen mode

grid-template :

Alt Text

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;
Enter fullscreen mode Exit fullscreen mode

gap/grid-gap :

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

Alt Text

this is the shorthand of 2 properties -

  • row-gap
  • column-gap

An example

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

/* The shorthand */
gap : 20px  30px;
Enter fullscreen mode Exit fullscreen mode

Credits

Credits

Read Next :

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❀️

Alt Text

Top comments (60)

Collapse
 
Collapse
 
joyshaheb profile image
Joy Shaheb

Sure πŸ˜„

Collapse
 
lorenzoblog profile image
Lorenzo

Added! You can find it in the CSS section --> Grid

Ps: Leave a like if you want πŸ™ƒ

Thread Thread
 
joyshaheb profile image
Joy Shaheb

You can also include this cheat sheet for flexbox, and nice collection btw, keep up the good work <3

Thread Thread
 
lorenzoblog profile image
Lorenzo • Edited

Added! If you want I propose you that I put your two cheat sheets in a more evident way (I write "go check this cool cheat sheets", I put a more visible link, a photo ...) and in exchange in your two articles you add the liquid tag of my compilation (at the end or at the top).
I did my part! it's your turn now

Reply if you accept.

Collapse
 
billraymond profile image
Bill Raymond

Recently, I built my site from scratch using CSS Grid as my only layout mechanism and love it. That said, even though I used it nearly every day for two months, it was super difficult to remember the correct term (I still forget the differences between justify and align). There are so many great sites out there, but this is by far the easiest cheat sheet I’ve ever seen. Thanks!

Collapse
 
deadlyhifi profile image
Tom de Bruin

I always forgot too, then I heard a handy tip. You justify text in a text editor, so that’s the horizontal X axis (provided you haven’t flipped the grid).

Collapse
 
billraymond profile image
Bill Raymond

That’s a great memory jogger, thanks!

Collapse
 
joyshaheb profile image
Joy Shaheb

You're welcome, I'm glad you like it πŸ˜„

Collapse
 
hellonearthis profile image
Brett Cooper

Constantly referring to the views are boys is very sexist.

Collapse
 
joyshaheb profile image
Joy Shaheb

My apologies, Next time I'll address everyone

Collapse
 
hellonearthis profile image
Brett Cooper

Cool, Dev.to is an inclusive community.

Collapse
 
calag4n profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
calag4n

No, it isn't.
Fragile people like you make the world dumber.

Collapse
 
hellonearthis profile image
Brett Cooper

You must be a boy as to not see that this is sexist to females who are watching this video. You're also the fragile one that was triggered to respond to a comment about sexisum. Even the OP recognized that it was a mistake not to be inclusive.

Thread Thread
 
calag4n profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
calag4n

You must be a boy as to not see that this is sexist to females

🀣 Thanks, you made my day !!

Do you even see that you are the only one who made a sexist sentence here ?!
Ironic-Man 🦸

Collapse
 
madrafj profile image
Ahmad Rafsanjani

Great, it helps me understand Grid better.. recently i used grid and flex altogether.. grid for layout and flex for positioning.. but after read your post seems like flex wont be necessary at most case for me..
Anyway, nice illustration

Collapse
 
joyshaheb profile image
Joy Shaheb
Collapse
 
aneeqakhan profile image
Aneeqa Khan

thats the cutest article becoz of unicorn emojis :D
good work!

Collapse
 
joyshaheb profile image
Joy Shaheb

I'm glad you like it πŸ˜„

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
joyshaheb profile image
Joy Shaheb

Check before the conclusion. Thanks

Collapse
 
iulyaav profile image
Iulia

This is not only super useful, but super cute. I've recently started a project that is based heavily on visuals and I got stuck in layering. I think you just gave me bonus ATK points in my fight against the CSS monster XD

Collapse
 
joyshaheb profile image
Joy Shaheb
Collapse
 
afif profile image
Temani Afif

Technically when using a gap, the grid line acquire the size of that gap (it's not a line in the middle having half the gap on each side). From the specification

The effect of these properties is as though the affected grid lines acquired thickness:

Collapse
 
cnerd profile image
Robert Mitchell

Great article! Just started learning css and the illustrations are very helpful. Thanks!

Collapse
 
viktorwong profile image
viktor

hello,I am Chinese Front end developer!
I think this article is very good!

so I hope more people learn!
can I translate and reorganize this article to the Chinese community "juejin.cn"?

Collapse
 
joyshaheb profile image
Joy Shaheb

Ya sure. Go for it. I also have a cheatsheet on flexbox. You can find it on my profile. I hope both of these articles will be helpful. Have a nice day ^^

Collapse
 
viktorwong profile image
viktor

yeah,thank you evey much!

Thread Thread
 
joyshaheb profile image
Joy Shaheb

Also, send me a link of your finished article :"D
best of luck, if you need the high quality images of the article, do let me know ^^

Thread Thread
 
photoshopvip profile image
Photoshop VIP

Hey, what a great article, love it!

Absolutely informative and clear at the same time about CSS Grid.
Would you give us your permission to translate into Japanese and share this our audience on our blog (photoshopvip.net), please?
I’ll have the author and original link (clickable) in the post.

Thread Thread
 
joyshaheb profile image
Joy Shaheb

For sure! I hope you best of luck !

Collapse
 
codedgar profile image
codedgar • Edited

Wow this is a complete masterclass on how to use grids, thanks!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.