Let’s learn about the new system for creating two-dimensional layouts in CSS called CSS Grid, compare it to Flexbox and learn how to customize awesome layouts.
In this article, we’re going to learn more about a powerful layout system for creating amazing and beautiful layouts on the web—we’re going to learn about CSS Grid. We’re going to understand why this technology was created and what exactly it is, what problems it helps us to solve, its similarities to Flexbox, and how it works in modern browsers to allow us to create powerful layouts without having to add a lot of extra CSS code.
If you’re not new to web development, maybe you remember a time when we didn’t have a lot of technology or tools to create layouts in CSS and HTML, when clients were asking us for some advanced things and we weren’t able to do them. Sometimes it wasn’t such an advanced feature, but the web and the technologies that it was providing for us at the time were not the best and, for sure, were not the right technologies for the job.
Most of the time when we were trying to create advanced layouts using CSS, we ended up with some dark and giant code in our application, with a whole bunch of divs, spans, classes, etc. Back at that time, we didn’t have Flexbox to help us position elements on the page like we wanted to, and we didn’t have many of the semantic elements that HTML5 provides us today, like aside, header, nav, etc.
The web was in a huge, notable, and awesome evolution throughout those years, getting more support for technologies, and browsers have also evolved to keep up with the numerous web APIs that we have nowadays. It’s been making the life of all internet users easier—every user today is capable of navigating in any website on any device, without getting any kind of problems. Today, we’re capable of creating some awesome layouts and websites, capable of creating amazing things that weren’t even imaginable those years ago.
In this article, we’re going to learn more about the most exciting and powerful layout system that we have today to create layouts on the web using CSS: CSS Grid. First, let’s get into and recap a little bit of Flexbox, which will give us a foundation for layouts on the web. Then we’re going to learn why CSS Grid is such a powerful technology and how we can start to use it today to create the most advanced layouts in the world.
Back to Flexbox
An exciting and innovative way to create beautiful layouts on the web was launched a few years ago, the first draft publishing on July 23rd, 2009. Called Flexbox, it helps us to create more efficient and beautiful layouts by allowing us to organize, position and sort elements on the page anyway we want. It got so much easier to create websites by using Flexbox because, with it, all we must do to start using it is to pass a
display: flex to an element of the page, then this element becomes a container.
When you pass a
display: flex to an element, that specific element will now become a container, which means that it will align items horizontally by default. You can change it to align items vertically if you want to; all you must do is pass
flex direction: column.
Flexbox is such a nice and intuitive way to create beautiful layouts on the web. If you don’t know yet how to use it the right way, I’d really recommend you read the MDN docs of the basic concepts of Flexbox. Then even if you migrate to CSS Grid, you can have a pretty solid base of layout systems on the web, making it easier to learn CSS Grid.
But, what exactly is the deal with Flexbox? How is Flexbox different from CSS Grid?
The main difference between Flexbox and CSS Grid is: Flexbox is a one-dimensional layout system, while CSS Grid is a two-dimensional grid-based layout system.
While using Flexbox, you’ll have the size of your flex-item defined inside of the flex-item itself, in CSS Grid you’ll have it defined in the grid container. Another difference between them is that in Flexbox you’ll have a column or row limitation, while using CSS Grid you’ll not have this problem because you’ll set the right amount of columns or rows that you want.
They have a lot of differences, but they’re not so different when we’re talking about creating layouts—you can achieve the same goal using both, but with different implementations. While using CSS Grid, you can and most of the time will end up using Flexbox inside your CSS, and vice versa, but CSS Grid is a more powerful way to create beautiful and advanced layouts because it’s a two-dimensional layout system. That means that we can have as many columns or rows as we want, without having to adapt elements in a strange way or having to create a lot of media queries, etc.
Now that we know the most important difference between Flexbox and CSS Grid, let’s start to learn more about CSS Grid and understand why this layout system is so powerful and innovative.
When we’re using Flexbox, we have a one-dimensional layout system—that means that we cannot create custom rows or columns for example. The beauty of CSS Grid is that it’s a two-dimensional layout system, which means that we can create as many columns or rows as we want, and are able to have different layouts if we want. Now, let’s understand the basics about CSS Grid and its properties, and see how things work in this new layout system.
The first and main thing we need to understand is that if we want to use CSS Grid on our page or in a specific element, all you need to do is pass
display: grid to that element:
By passing a
display: grid to our element, we’re defining that element as a new grid container. We can also pass
display: inline-grid to create a new grid. After passing it, you’re now able to create columns or rows inside that element.
Grid Columns & Grid Rows
After you turn your element into a new grid container, you will need to specify how many columns and rows do you want. First, to create columns in CSS Grid, we use the following syntax:
grid-template-columns: 200px 200px;
In the above line, we created two columns of the same size. Now, to create rows, as you can guess, it’s almost the same:
grid-template-rows: 300px 300px;
In the line above, we created two rows of the same size. A nice thing here is that you can pass a lot of values and units inside of it, and you can mix them as well. Let’s imagine that we want to create 3 rows, one with 25%, other with 400px, and the last one with 1fr (a new CSS unit):
grid-template-rows: 25% 400px 1fr;
Another nice feature that we can use while we’re creating our rows or columns is the repeat CSS function. This function can be used to represent a repeated fragment of the tracklist, which means that we can repeat as many columns or rows as we want without having to write a lot of code.
Let’s imagine that we want a grid item to have 12 columns—how would we do that? We can use the repeat CSS function, like this:
grid-template-columns: repeat(12, 50px);
Now our element became a grid! Now that we know the basics about CSS Grid, let’s create a simple page using CSS Grid to see the power behind it.
First, let’s create the following HTML structure:
<div className="one" />
<div className="two" />
<div className="three" />
Now, let’s give some style to the
firstGrid element. This element will have the following style:
As you can see, this element is not a grid container, yet. Let’s turn this element into a grid container, and this specific element will have three columns of the same size each, and only one row. This is how we would do that:
grid-template-columns: repeat(3, 1fr);
Now, our element is a grid container, having three columns of the same size and one single row. Now, let’s give some CSS for the children divs inside the
Now, you should have an element with three children divs inside it, with three columns of the same size each, and only one row. If you open the Developer Tools and go to Inspect Element, you can see what’s going on inside that element, how many rows or columns it has, etc.
But you might be wondering now: “How can I position elements the way I want, without having the follow the HTML order?” For example, if we want to position the
three div on the first column, how would we do that?
When you’re using CSS Grid, if you want to position elements in a specific order, you can use the
grid column-end to position the element in a specific column, and the
grid-row-end to position in a specific row.
For example, if we wanted to position the
three div in the first column, all we have to do is go to the three div CSS, and put the following code:
We can position elements in the layout any way we want. This is such a powerful layout system and opens a lot of possibilities for new designs.
Another awesome feature that we have in CSS Grid is column and row gap. If we want to have a little space between rows or columns, we can use the
This is just a guide and introduction to CSS Grid. You’ll learn much more by applying it on a daily basis and creating other types of layouts. At the moment, CSS Grid is the most powerful layout system for the web. Browsers have been supporting it for a while, and a lot of companies and developers are starting to use it in their projects instead of Flexbox.
As I said earlier, most of the time when you’re using CSS Grid you’ll end up using some Flexbox in your code. That’s totally fine and a really smart move, because when you’re using CSS Grid you’ll need to do some things that you’re used to doing with Flexbox.
In this article, we learned about CSS Grid and its power to create beautiful and awesome layouts on the web nowadays, and how we can benefit from using it in our applications since almost all browsers have support for CSS Grid. We also learned a little bit about Flexbox and the differences between Flexbox and CSS Grid. You can start to create a lot of different layouts right now just using CSS Grid, but that doesn’t mean that you should stop using Flexbox, because most of the time while using CSS Grid, you’ll need some features from Flexbox to center or align elements.