DEV Community

loading...
Cover image for CSS Grid Cheat Sheet 🔥

CSS Grid Cheat Sheet 🔥

Mariana Simon
On a mission to make online learning less boring. Coding live on LearnPine.com
Originally published at learnpine.com ・1 min read

Hi dev friends!

I made this CSS Grid Cheat Sheet that fits on one page. I hope this will help you learn the grid layout. Please let me know what you think of it :)

If you want to see more resources like this one and coding tips, you can follow me on Twitter 🚀

learnpine_grid_cheat_sheet

Discussion (14)

Collapse
cwilliams2024 profile image
Calvin Williams

Make one for bootstrap and tailwind

Collapse
organizedfellow profile image
Jaime Aleman

I found one for Bootstrap frontendcheatsheets.com/bootstrap

I highly doubt any cheatsheet exists for TailwindCSS - simply because of the sheer amount of combinations conceivable. Bootstrap has several ways to generate a "card" but for TailwindCSS, I could come up with at least a hundred!!!

<section id="aboutme" class="container mx-auto flex flex-wrap my-0 p-4 flex-col md:my-10 md:flex-row">
    <div class="flex flex-row justify-between text-center grid gap-4 grid-cols-1 sm:grid-cols-4 md:flex-col">
        <div class="text-center px-5 sm:text-left lg:text-right lg:px-10 col-span-1 sm:col-span-3">
Enter fullscreen mode Exit fullscreen mode

Yours would be different. The next Developer would code theirs differently as well.

Collapse
dyloneus profile image
David Apomah

Please 😁🙏
And thank you!
This is awesome

Collapse
tugrul profile image
Tuğrul Topuz

Thanks for your effort. I'm still using flexbox and this guide can help me to kickstart use grid functionality

Collapse
simonpaix profile image
Mariana Simon Author

Thanks, Trugul! Good luck :)

Collapse
violet profile image
Elena

It should be mentioned that justify and align also works with flex and css text columns

Collapse
mehdico profile image
Mehdi Mousavi

👍🏼

Collapse
ifeoma profile image
Ifeoma

So I'm about to start on a project and thinking of the layout- I open my dev.to which i haven't done in a long while to post an article and I see this post. I'll be using it, well done!

Collapse
simonpaix profile image
Mariana Simon Author

Glad to help :)

Collapse
lopudo profile image
linda opudo

Thanks for this information.

Collapse
israel1116 profile image
israel1116

Thank you so much! I use your flex cheat sheet all the time.

Collapse
simonpaix profile image
Mariana Simon Author

Glad to know it helps, Israel :)

Collapse
amanchourasia profile image
Aman Chourasia

Cheatsheet! 🙌

Collapse
csalkemy profile image
AlkemyHossain

Css tricks have a great documentation about CSS grid.