CSS Grid is a really powerful tool and I'll show you exactly why. The main objective of CSS Grid is to change **completely** how we design user interfaces based on grid systems. Grid was the first CSS module created specifically to solve layout problems that we've been _working around_ since forever. *** As the title says, **this a practical guide**, so I gonna show you a lot of code/examples and almost no concepts. If you wanna know/learn more about the CSS Grid concepts, I'm gonna recommend some material for you: * [A complete Guide do Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) * [Learn CSS Grid](https://learncssgrid.com/) * [CSS Grid Layout - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) *** ⚠️ First, a reminder! *Grid* and *Flexbox* are **NOT** enemies. They can work perfectly together, you just need to know when to use which of them. - *Flexbox*: is essentially for putting items in ONE dimension (row or column); - *Grid*: used when working with TWO dimensions;

### Let's dive in! ![alt text](https://media.giphy.com/media/JykvbWfXtAHSM/giphy.gif)

> Note: I **highly** recommend you check the CodePens embed here in this article. Go there and play a little bit with the code 🕹️

## 1. Center it like a boss I'm *pretty sure* you already had a lot of trouble centering an item. What if I told you all you need are **two** lines of code? Imagine you have a `parent div` and a `child div`, then all you got do is this: ```css .parent { display: grid; place-items: center; } ``` ###### CodePen example: {% codepen https://codepen.io/richardnikolas/pen/QWGNpxQ default-tab=css,result %} ## 2. repeat + grid-template-columns There are some powerful functions and properties of CSS Grid. Two of them are `repeat` [[MDN Docs]](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()) and `grid-template-columns`, which can help A LOT to create some nice grids. `repeat` allows a large number of columns or rows to be in a recurring pattern using a super concise form. You can ~~but you shouldn't~~ create a grid template like this: ```css .parent { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } ``` Or you can use `repeat` and make it look like this: ```css .parent { display: grid; grid-template-columns: repeat(12, 1fr); } ``` It's waaaay better, right? 😊 ###### CodePen example: {% codepen https://codepen.io/richardnikolas/pen/rNWeqVg default-tab=result %} ## 3. Infinite responsive grid If you wanna create a responsive grid full of items of the same size, you can achieve that using **three** lines of CSS. ```css .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } ``` ###### CodePen example: {% codepen https://codepen.io/richardnikolas/pen/GRNrQzq default-tab=result %} ## 4. Basic layout organizer What if you wanna organize your layout in a simple way? Something standard like this: ![alt text](https://css-tricks.com/wp-content/uploads/2018/11/dddgrid-template-areas.svg) It's super easy, barely an inconvenience! ~~(someone got the reference?)~~ We only need to use `grid-template-areas` and `grid-area` to organize our page! Your HTML could look like this: ```html

Header

Article

``` And your CSS like this: ```css container { display: grid; height: 100%; /* Explicit grid */ grid-template-areas: "topbar topbar topbar" "sidebar content ads" "footer footer footer"; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 15% 50% 20%; gap: 35px; } header { grid-area: topbar; } aside { grid-area: sidebar; } article { grid-area: content; } nav { grid-area: ads; } footer { grid-area: footer; } ``` And your result: ###### CodePen example: {% codepen https://codepen.io/richardnikolas/pen/NWbdYPX default-tab=result %} ## 5. Grid + Flexbox = 💞 Just a little proof of how these two guys can work pretty well together like *macaroni and cheese*. We'll use **grid** to design the page itself and **flexbox** to organize the cards themselves. And it's highly responsive, of course. ```css container { display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); } .card { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; } ``` ###### CodePen example: {% codepen https://codepen.io/richardnikolas/pen/qBqRoVb default-tab=result %} ## 6. An AMAZING Photo Gallery To wrap this up, I'll show you a small piece of code that creates a *beautiful photo gallery* 📷✨ Another nice thing: Your grid can be *animated*! Using the powerful `grid-template-areas`, `grid-area` and CSS animation we can make some cool effects. ```css .animated-grid { display: grid; gap: 1rem; height: 85vh; margin-bottom: 200px; grid-template-areas: 'a b c d' 'l 🌟 🌟 e' 'k 🌟 🌟 f' 'j i h g'; grid-template-rows: repeat(4, 25%); grid-template-columns: 240px auto auto 240px; --standard-delay: 100ms; } .card { background-color: rgb(36, 243, 147); animation: cardEntrance 700ms ease-out; animation-fill-mode: backwards; } ``` And YES, you can even use *emojis* to name an area. ###### CodePen example:
(Click on 0.5x scale for a better visualization or visit the CodePen page itself) {% codepen https://codepen.io/richardnikolas/pen/rNWjdgV default-tab=result %} *** ### That's all, folks! Thanks for reading this and if you enjoyed your reading or learned something new, don't forget to slap that ❤️ button! ![alt text](https://media.giphy.com/media/d68IdpvmAHohx5NMEV/giphy.gif) *** #### Helpful resources to learn more about CSS Grid: * 🎥 - [CSS Grid in 100 Seconds](https://www.youtube.com/watch?v=uuOXPWCh-6o&ab_channel=Fireship) * 🎮 - [Grid Garden](https://cssgridgarden.com/) * 📝 - [1-Line Layouts](http://1linelayouts.glitch.me/) * 📝 - [Grid - Malven](https://grid.malven.co/)

richardnikolas

The Ultimate Practical Guide to CSS Grid

Join Our Newsletter. No Spam, Only the good stuff.