Exploring the Power of CSS Grid

In the past, my approach to building CSS layouts was using Normal Flow and Flexbox. However, I secretly hoped that someday Grid would revolutionize that and make much of my CSS knowledge obsolete.

I took time to dive into Grid and realized it is not the universal solution I had hoped for. Nevertheless, it can be a valuable addition to your CSS Toolbox. Now, I would like to share where I think it fits in.

Motivation

I wrote my first CSS when Bootstrap gained popularity. Back then, Bootstrap used float layouts and I had no clue about them. Still, I could create any layout using Bootstrap, which made me happy. CSS did not get in my way of building websites.

Later, I realized that centering text in divs was more complex than expected. So, the next step in my CSS journey was to learn about Flexbox. Initially, solely for centering elements, but later I learned how to build any layout using Flexbox.

Then, Grid gained popularity. I deliberately chose not to invest much time in it. Flexbox served my needs well and supports Internet Explorer, which is thankfully less crucial nowadays.

However, I was always curious about Grid. I wanted to explore it as my new go-to technique for layout design. Now, I took the time to dive into Grid. I read all the guides and tutorials I could get and added Grid to my CSS Toolbox.

This blog post is not a thorough introduction to all the aspects of Grid. Instead, it will provide you with the basics of Grid and help you understand when to use it. You can go deeper into the rabbit hole of Grid if it feels worthwhile to you afterward.

The basics of Grid

If you have not used Grid yet, let me introduce it to you. We are building a simple layout that looks like that:

Before we write the CSS rules for the layout, let us build up a mental model of how CSS Grid works:

To summarize, when constructing a new layout using Grid, you begin by specifying a grid that accommodates your design. From there, you define the position and size of each element within this grid.

Using the Grid with line-based placement

Now that we have the mental model, let us put it into practice. Building upon our recent knowledge, we will specify the following CSS rules:

We include a CSS ruleset called container with a display property set to grid to activate the Grid for our HTML-Element. By using grid-template-columns and grid-template-rows, you define a 2x2 layout. Here, the first column is set to auto so it is as wide as its content. The second column takes up the remaining space by using 1fr (fractional unit). The rows follow the approach but in reverse. The first row expands to fill all the remaining space. The second row adjusts its height based on its content.

Note Besides auto and the fractional unit, there are further keywords to create your desired grid. You can find all options in the reference pages of grid-template-rows and grid-template-columns.

The footer should span across both columns at the bottom. We add a second rule set footer for that. It defines grid-column-start as 1 and grid-column-end as 3. Those numbers specify the start and end grid line of the footer. We add this class to the footer element. Now, it will occupy two cells of the grid.

Here is the HTML structure to use the CSS classes described below:

And here are the final rendered results (with some additional classes added for minimal styling). Every box is where it should be, thanks to Grid.

Is CSS Grid the new default?

I hoped that Grid would make much of my previous layout knowledge obsolete. To check if my hope was justified, I researched the layout techniques used by well-known product companies. Not all pages are created equally, so I decided to distinguish between landing pages and client apps developed.

Here is a breakdown of some of the primary layouts. I checked the layout technique used for the main design components, focusing on the header, content, and footer sections. I checked if they use Normal flow, Flexbox or Grid.

Upon reviewing the pages, I could not see a clear trend for the most popular layout techniques. The distribution of layout techniques seemed evenly spread.

However, one notable observation was that most landing pages use the Normal flow layout. The reason probably is that landing pages should guide users through a coherent sequence of information. They prioritize a linear flow over interactivity.

On the other hand, complex client applications often use Grid layouts. They help to display multiple interactive capabilities to the user.

Flexbox remains a popular choice as a layout technique. In addition, almost every page had sub-sections styled with Flexbox.

Personal Evaluation of CSS Grid

Advantages of CSS Grid

The mental model of building layouts with CSS Grid feels intuitive to me. One advantage is that you can create complex layouts using simpler markup compared to Flexbox. To build the example layout we discussed earlier using Flexbox, I would need to add an additional wrapper. A would need <div> to wrap the sidebar and content sections. As the layout becomes more complex, using Flexbox would require an increasing number of boxes.

A consequence of having fewer boxes is that fewer places in the markup define the layout. You read fewer places in the code to understand how the layout works. In contrast with Flexbox, understanding the page layout requires checking each child element individually.

Critique of CSS Grid

When I began reading the Grid guide on MDN, I immediately noticed its extensive length. Comprehensive documentation is valuable, I couldn not help but wonder if the features of Grid are somewhat bloated. Here is a comparison of the guide lengths with other layout techniques:

Grid allows to specify the same layouts with multiple different notations. I omitted many features in the basic explanation above to keep the introduction short. Here are a few of them:

• Name each grid track instead of using the numbers we used
• There are several attributes to shorten the CSS
• Placing elements with grid areas
• Define the behavior of elements that exceed your specified grid

I prefer to have fewer choices. Only one technique to use Grid would be fine for me. Even if I restrict myself to a small subset of Grid I regularly use, I might still get into a codebase that uses a different subset. That forces me to learn all possible flavors of Grid in the long run.

Conclusion

So, which layout technique should you choose? Unfortunately, there is no simple answer. You have to consider your specific needs. Here are my current rules of thumb for deciding which layout to use:

Note Those rules will have edge cases and might change the more I use Grid. For instance, Grid can style a dynamic number of elements, but I find Flexbox more intuitive here.

These rules apply to any new section you add to your website. They are not specific to the top-level layout. Each time you add something, you can ask yourself those questions.

You made it to the end. Thanks for following my journey to learn about Grid. I hope you found this journey valuable and that you can add CSS Grid to your CSS Toolbox.