The 3Gs of CSS3: Grid Edition
Tags: css, codenewbie, beginners, webdev
Published: 2020-09-24 15:22:12

_A Collection of **G**uides, **G**ames, and **G**enerators useful for your everyday CSS needs. The idea behind this collection is to help you become a better CSS developer by providing resources to help you understand the concepts and generators that will make you more efficient._

# **Grid**

CSS Grid is a tool you can use to create wonderfully responsive layouts without having to rely on using queries. For one-dimensional layouts (rows OR columns), take a look at my 3Gs of [FlexBox](https://dev.to/santiagocodes/the-3gs-of-css-flexbox-edition-4b64) article. For two-dimensional layouts (rows AND columns), Grid is the solution for you.   

## **G**uide

[CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) has a complete CSS Grid Guide with illustrations focusing on all the settings available for the parent container and its child elements. You can even buy a poster from them to hang on your wall (to go with your FlexBox one).

![ScreenShoot of CSS Tricks' Grid Guide](https://dev-to-uploads.s3.amazonaws.com/i/gaf1vzsio4vk4agna4l7.png)

Alternative: [Learn CSS Grid](https://learncssgrid.com/) by [jonsuh](https://twitter.com/jonsuh).

## **G**ames

### GridGarden

Water your carrot garden with [CSS GridGarden](http://cssgridgarden.com). With this simple game, you get to practice your CSS Grid skills.

![Screenshot of CSS Grid Garden](https://dev-to-uploads.s3.amazonaws.com/i/amm1yvdj9hfrprdxbnuw.png)

### GridCritters

For an adventure-filled game, take a look at Mastery Games' [GridCritters](https://gridcritters.com/). Price: ~~$179~~ $99

![Screenshot of Grid Critters](https://dev-to-uploads.s3.amazonaws.com/i/qdhyf6vpxh2vqr67zf69.png)

### CSS Diner

Not a Grid game, but useful for it nonetheless. [CSS Diner](https://flukeout.github.io/) is the game to play if you want to learn the ins-and-outs of CSS selectors. You can later use this to select the elements you want to apply Grid to.  

![Screenshot of CSS Diner](https://dev-to-uploads.s3.amazonaws.com/i/t22qmgxgridzl38m063v.png)

## **G**enerator

In the spirit of not memorizing every concept, use one of the many generators available online. [LayOutIt!](https://grid.layoutit.com/) stood out for me from the rest as you are but a click away from taking your generated grid into CodePen (how cool is that?! :smiley: ). 

![Screenshot of Layoutit](https://dev-to-uploads.s3.amazonaws.com/i/7s2jl3s7r4b1aq6dceax.png)

Alternatives: [CSS Grid Cheat Sheet](https://alialaa.github.io/css-grid-cheat-sheet/) by alialaa and [CSS Grid Generator](https://cssgrid-generator.netlify.app/) by sarah_edo.

## Bonus: Video Tutorials 

For a quick look at CSS Grids, check out Jenn Lukas' [How to use CSS grid layout in 60 seconds!](https://www.youtube.com/watch?v=FwiSbmyNQ18) video on the Women Techmakers' youtube channel. 

Want a more in-depth look? Wes Bos has an amazing (and free!) 4-hour course on CSS Grid. You can find the 25 videos on [cssgrid.io](https://cssgrid.io/).

![25 videos of Grid](https://dev-to-uploads.s3.amazonaws.com/i/ad02cwskdmeck2z671ik.png)


---

If you liked what you read hit that :heart: on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart. 

:computer: **article.close()**