DEV Community

loading...
Cover image for CSS Grid Cheat Sheet Illustrated in 2021🎖️

CSS Grid Cheat Sheet Illustrated in 2021🎖️

Joy Shaheb
Front end Developer 🔥 || Youtuber 🎬|| Blogger ✍|| K-pop fan ❤️️based in Dhaka, Bangladesh.
Originally published at freecodecamp.org ・Updated on ・13 min read

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

Discussion (59)

Collapse
devlorenzo profile image
DevLorenzo • Edited
Collapse
joyshaheb profile image
Joy Shaheb Author

Sure 😄

Collapse
devlorenzo profile image
DevLorenzo

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

Ps: Leave a like if you want 🙃

Thread Thread
joyshaheb profile image
Joy Shaheb Author

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

Thread Thread
devlorenzo profile image
DevLorenzo • 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 Author

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 Author

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

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 Author

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 Author

For sure! I hope you best of luck !

Collapse
aneeqakhan profile image
Aneeqa Khan ✨

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

Collapse
joyshaheb profile image
Joy Shaheb Author

I'm glad you like it 😄

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

Check before the conclusion. Thanks

Collapse
cnerd profile image
Robert Mitchell

Great article! Just started learning css and the illustrations are very helpful. 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 Author
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
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 Author
Collapse
abdulrahman_ali profile image
Abdulrahman Ali

Loved it. Keep going <3

Collapse
sandralundgren profile image
Sandra Lundgren

I came here for the cute illustrations, and stayed for the quality info 😊 Instant bookmark 📚

Collapse
joyshaheb profile image
Joy Shaheb Author

More quality content incoming pretty soon 🌹

Collapse
ms314006 profile image
Clark

Nice post! I wonder know what is the difference between 1fr and auto?

Collapse
joyshaheb profile image
Joy Shaheb Author

Auto takes up remaining space of screen. 1fr divides the entire screen into fractions. Let's say you have 5 kids and $50. You equally divide the money among the kids. Same case applies for 1fr( 1 fraction). And it is the same as the mathematical fraction problems we did back in high school or before. Thanks !

Collapse
ms314006 profile image
Clark

Thanks!

Collapse
codedgar profile image
codedgar • Edited

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

Collapse
bilalbajou profile image
bilalbajou

Can you compile these images into a pdf file so that we can print them?

Collapse
fahimhassanmollah profile image
Fahim Hassan Mollah

Borther your are Bangladeshi,,,,happy to see you here,,,

Collapse
andrewbaisden profile image
Andrew Baisden

Wow nice I like the art style.

Collapse
nevkatz profile image
Nevin Katz

This tutorial is awesome.

Collapse
simbiosis profile image
SIMBIOSIS

Cheat sheets are great to have the main and important stuff at hand,specially for those who are not experts in a specific subject but need to be involved once in a while. So, thank you this one.

Collapse
mpelyhes profile image
MPelyhes

Thank you for sharing this! The visualizations are very helpful, and I will be coming back to reference your cheat sheet the next time I'm working with grid.

Collapse
muzammilaalpha profile image
muzammilaalpha

Good one!

Collapse
jackkeller profile image
Jack Keller

Great article! While grid feels pretty simple most times it's easy to sort of forget bits and pieces along the way!

Collapse
ra1nbow1 profile image
Matvey Romanov

Ultimate cheat sheet!

Collapse
dgx32123 profile image
Dominik Gorczyca

If this is not an unicorn then I don't know what is :D

Collapse
brandonbawe profile image
Brandon Bawe

Great article Joy.

Collapse
vishal2369 profile image
Vishal2369

Super handy

Collapse
zulfwz profile image
Zul-fwz

Thank you so much.

Collapse
joyshaheb profile image
Joy Shaheb Author

You're welcome :"D

Collapse
damimd10 profile image
Damian

Awesome resource I'll share with my friends

Collapse
willsoon profile image
willsoon

This is amazing! Thank you.
(Please could you fix the Justify-Content typo in the graphic?)

Collapse
joyshaheb profile image
Joy Shaheb Author

Thanks man ! :"D

Collapse
ignaciorm profile image
IgnacioRCM

Good work! <3

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Super handy! Loved those cute graphics!