DEV Community

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

CSS Grid Cheat Sheet Illustrated in 2021🎖️

joyshaheb profile image Joy Shaheb Updated on ・5 min read

Table of Contents :

Let's refresh Our CSS Grid Memory. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021!🎖️

YouTube :

Grid Architecture

Grid Architecture

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

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

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

column-gap :

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

Alt Text

row-gap :

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

Alt Text

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

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

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

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

Children Properties

Alt Text

The Grid Scale

Alt Text

Alt Text

grid-column : start/end

THESE 2 properties are used to join multiple COLUMNS together. It is a shorthand of grid-column-start & grid-column-end Skip to this topic on the video above if you're confused using the timestamps.

grid-row : start/end

THESE 2 properties are used to join multiple ROWS together. It is a shorthand of grid-row-start & grid-row-end
Skip to this topic on the video above if you're confused using the timestamps.

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

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

Alt Text

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

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

Short Hands

Alt Text

place-content :

Alt Text

place-items :

Alt Text

place-self :

Alt Text

grid-template :

Alt Text

gap/grid-gap :

Alt Text

Credits

Unicorns

Credits

Read Next :

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❤️

Alt Text

Alt Text

Discussion (57)

pic
Editor guide
Collapse
Collapse
joyshaheb profile image
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
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
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
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
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
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
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
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
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
codedgar profile image
codedgar • Edited

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

Collapse
abdulrahman_ali profile image
Abdulrahman Ali

Loved it. Keep going <3

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!

Collapse
gabrieljm profile image
Gabriel José

Really good, congratulations 👏🏻

Collapse
anridev24 profile image