Mariana Simon

Posted on Jul 15, 2021 • Originally published at learnpine.com

CSS Grid Cheat Sheet 🔥

#webdev #css #beginners #productivity

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 🚀

Top comments (18)

Calvin Williams • Jul 16 '21

Make one for bootstrap and tailwind

Jaime Aleman • Sep 24 '21

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

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

Dave A • Jul 17 '21

Please 😁🙏
And thank you!
This is awesome

Harry Fahringer \|/ • May 2 '22

Thank you so much for this! :)

Tuğrul Topuz • Jul 16 '21

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

Mariana Simon • Jul 16 '21

Thanks, Trugul! Good luck :)

Elena • Jul 26 '21

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

Mehdi Mousavi • Jul 16 '21

👍🏼

Dazzler Kumar • Oct 8 '21

Much appreciated !

Mariana Simon • Oct 15 '21

thanks, Dazzler!

Ifeoma • Jul 17 '21

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!