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 w...
For further actions, you may consider blocking this person and/or reporting abuse
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
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
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
Great article! Just started learning css and the illustrations are very helpful. 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
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!
Wow this is a complete masterclass on how to use grids, thanks!
I came here for the cute illustrations, and stayed for the quality info 😊 Instant bookmark 📚
More quality content incoming pretty soon 🌹
Loved it. Keep going <3
Can you compile these images into a pdf file so that we can print them?
Borther your are Bangladeshi,,,,happy to see you here,,,
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.
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!
We want more content like this one ❤.
Really good, congratulations 👏🏻