The Ultimate Practical Guide to CSS Grid
Tags: css, webdev, firstpost
Published: 2021-02-13 20:22:19

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;
<p> </p>

### Let's dive in! 

![alt text](https://media.giphy.com/media/JykvbWfXtAHSM/giphy.gif)

<p> </p>

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

<p> </p> 

## 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
<body>
	<container>

		<header>Header</header>

		<article>Article</article>
      	<aside>Sidebar</aside>
  		<nav>Ads</nav>

		<footer>Footer</footer>
	</container>
</body>
```

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: <br> (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/)