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:
โ ๏ธ 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!
ย
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:
.parent {
display: grid;
place-items: center;
}
CodePen example:
2. repeat + grid-template-columns
There are some powerful functions and properties of CSS Grid. Two of them are repeat
[MDN Docs] 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:
.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:
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
It's waaaay better, right? ๐
CodePen example:
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.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
CodePen example:
4. Basic layout organizer
What if you wanna organize your layout in a simple way? Something standard like this:
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:
<body>
<container>
<header>Header</header>
<article>Article</article>
<aside>Sidebar</aside>
<nav>Ads</nav>
<footer>Footer</footer>
</container>
</body>
And your CSS like this:
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:
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.
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:
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.
.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)
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!
Helpful resources to learn more about CSS Grid:
- ๐ฅ - CSS Grid in 100 Seconds
- ๐ฎ - Grid Garden
- ๐ - 1-Line Layouts
- ๐ - Grid - Malven
Top comments (4)
Thank you Richard for your well explained and practical guide to CSS Grid <3
I learned a lot about CSS Grid from your post.
Good Luck!
Thank you so much for this comment <3
Good luck for you too \o/
Vocรช รฉ muito foda manin.
Conteรบdo esclarecedor, que demais!