Table of Contents :
- Grid Architecture
- Parent Properties
- Children Properties
- Short Hands
- Conclusion
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-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.
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.
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.
Call it, the blueprint(template) of our layout👇
column-gap :
This property is used to place gap between Columns inside the grid 👇
row-gap :
This property is used to place gap between Rows inside the grid 👇
justify-items :
This is used to position grid-items (children) inside grid container along the X-Axis[Main Axis]. The 4 values are 👇
align-items :
This is used to position grid-items (children) inside grid container along the Y-Axis[Cross Axis]. The 4 values are 👇
justify-content :
This is used to position our grid [Basically everything] inside grid container along the X-Axis[Main Axis]. The 7 values are 👇
align-content :
This is used to position our grid [Basically everything] inside grid container along the Y-Axis[Cross Axis]. The 7 values are 👇
Children Properties
The Grid Scale
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👇
Specifying grid-template-areas inside parent container 👇
specifying the names used in parent container inside children classes with grid-areas👇
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 👇
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 👇
Short Hands
place-content :
place-items :
place-self :
grid-template :
gap/grid-gap :
Credits
Read Next :
Conclusion
Here's Your Medal For reading till the end ❤️
Suggestions & Criticisms Are Highly Appreciated ❤️
YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb
Discussion (57)
Hello,
Can I add this cheat sheet to my compilation?
The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀
DevLorenzo ・ Mar 2 ・ 17 min read
Thanks
Sure 😄
Added! You can find it in the CSS section --> Grid
Ps: Leave a like if you want 🙃
You can also include this cheat sheet for flexbox, and nice collection btw, keep up the good work <3
FlexBox Cheat Sheets in 2021 || CSS 2021
Joy Shaheb ・ Jan 10 ・ 3 min read
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.
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!
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).
That’s a great memory jogger, thanks!
You're welcome, I'm glad you like it 😄
Constantly referring to the views are boys is very sexist.
My apologies, Next time I'll address everyone
Cool, Dev.to is an inclusive community.
No, it isn't.
Fragile people like you make the world dumber.
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.
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 🦸
thats the cutest article becoz of unicorn emojis :D
good work!
I'm glad you like it 😄
Check before the conclusion. Thanks
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
Great article! Just started learning css and the illustrations are very helpful. Thanks!
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
I'm glad you like it, I have an entire cheatsheet on flexbox as well
FlexBox Cheat Sheets in 2021 || CSS 2021
Joy Shaheb ・ Jan 10 ・ 3 min read
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"?
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 ^^
yeah,thank you evey much!
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 ^^
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.
For sure! I hope you best of luck !
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
I'm glad you like it. I have a similar post for flexbox, I hope it helps :"D
FlexBox Cheat Sheets in 2021 || CSS 2021
Joy Shaheb ・ Jan 10 ・ 3 min read
Nice post! I wonder know what is the difference between 1fr and auto?
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 !
Thanks!
I came here for the cute illustrations, and stayed for the quality info 😊 Instant bookmark 📚
More quality content incoming pretty soon 🌹
Wow nice I like the art style.
This tutorial is awesome.
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.
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.
Good one!
Great article! While grid feels pretty simple most times it's easy to sort of forget bits and pieces along the way!
Ultimate cheat sheet!
If this is not an unicorn then I don't know what is :D
Great article Joy.
Wow this is a complete masterclass on how to use grids, thanks!
Loved it. Keep going <3
Super handy
Thank you so much.
You're welcome :"D
Awesome resource I'll share with my friends
This is amazing! Thank you.
(Please could you fix the Justify-Content typo in the graphic?)
Thanks man ! :"D
Good work! <3
Super handy! Loved those cute graphics!
Really good, congratulations 👏🏻
Thank you <3