CSS Grid—The Future of Web Design is Already Here

Last year I had the chance to attend to SmashingConf Barcelona, a web design-centered conference. As I already mentioned in my previous post about the conference, I was surprised by the outstanding quality of both the staging and the talks. The talk I like the most was Jen Simons‘, who presented some cool stuff that we’ll soon see (or should I say “we’re currently seeing”) in web development.

Jen introduced us features like image cropping, dropping initial letters, cover sheets, multi-column layouts… I you want to know better how these (and other) demos work, check out her 2016 list, paying special attention to their source code.

The feature that I loved the most was CSS Grid. At that time, CSS Grid was still under development and no browser supported it by default. However, Jen told the audience that “by next summer [this summer], all major browsers will already support CSS Grids, so you’d better learn how to use it” and, well, she was completely right. So, I think it’s past time we talk about this amazing feature and how you can use it in your own developments.

There’s no “CSS Grid” without “Grid”

Before we dive in CSS Grid, we should probably spend a couple of minutes talking about grid designs in general. Essentially, a grid defines the underlying structure of your website using a set of invisible lines (rows and columns, actually) that generate the layout. Since an image is worth a thousand words, here you have this abstract definition depicted:

As you can see, the web has two clear row sections: welcome and news. Both sections have an underlying structure of 12 columns, even though these two blocks use them differently. Thus, the first block is divided in two halves—on the left side, there’s a featured news; on the right side, there are four smaller news. The second block, on the other hand, divides the content in three evenly-distributed columns.

If you’re familiar with frameworks such as Twitter’s Bootstrap or Foundation, you already know this 12-column structure. If you’ve ever wondered why they use 12 columns (instead of, for instance, 10), the answer lies in the flexibility it offers. 12 offers much more combinations than 10, because 12 has more factors—that is, it can be divided by more numbers— than 10.

And that’s all you basically need to know about grid designs—a set of invisible columns and rows define the areas in which you’ll position the content ? If you want to deepen in the subject, take a look at Ed Wassermann’s introduction to grids. And, please, feel free to share your own experience with us in the comments section if you feel like I missed something important—I’m sure our readers will appreciate it ?

How Did We Use to Implement Grid Designs?

Grids aren’t new—they’ve been with us for quite a long time. If we talk about web design, it all started with tabular layouts, followed by the beautiful, responsive frameworks we just mentioned (Bootstrap and so on). Both solutions required a lot of HTML markup to explicitly define the underlying grid layout. For instance, let’s try to re-create BBC’s website using Bootstrap. The HTML source code would probably look similar to this:

which results in:

As you can see, the resulting HTML code clearly contains a Grid layout. For instance, if we focus on the first block, you’ll see we have a div “row” divided in three columns. The width of each column is specified in the class attribute (using some predefined Bootstrap classes), but we still have to tweak the heights using specific CSS rules. That’s quite ugly, isn’t it? It all looks pretty similar to HTML tables! ?

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

How to Create a Layout with CSS Grid

CSS Grids will help you separate the content from its presentation. I’d say that CSS Grid is the most powerful layout system you have right now. Let’s recreate the example we’ve just seen, but using CSS Grid instead:

As you can see, the HTML code is much easier. There isn’t any layout information in the resulting code—each section contains a simple list of news. If we rendered this page, it look like this (I’ve kept the colors to help you visualize the result):

Now, how do we create the underlying grid? Using plain and simple CSS rules, of course! First, we need to apply a few rules to the parent containers. These rules will specify the grid itself (columns, rows, spacing, and so on):

which results in this:

Wow! Pretty cool, huh? With just a few CSS lines, we now have a beautiful grid rendered by our browser. Each block has been automatically placed in a cell, without doing anything else. But the resulting page is not exactly what we wanted, isn’t it? What’s wrong?

We divided the welcome block in three columns and two rows (that is, 6 cells). However, this block has 5 news only, which means that the automatic positioning of elements will leave one cell empty. To fix this, we need to add one extra CSS rule for the first child—we need to tell the browser that the first and foremost news in the header section takes two cells:

which results in the page we wanted:

Voilà! That’s all! We now have the same result we had in the beginning, but with a simpler and more elegant source code. We’ve been able to separate the HTML content from the CSS layout once and for all ?

Resources for Learning CSS Grid

To get started with CSS Grid, I recommend you CSS Grid Garden by Thomas H. Park. Throughout its 28 levels, you’ll learn all the basic stuff you need to know about CSS Grids:

Other resources are:

• A Complete Guide to CSS Grid at CSS Tricks. I don’t think this website needs any introductions… Here you’ll find all CSS Grid properties, along with detailed explanations and examples on how to use them. The website is divided in two columns—properties that apply to the container element (which define the grid itself) and properties that apply to children.
• CSS Grid Layout at Mozilla. Probably less detailed than the previous resource, this website also contains some useful information about CSS Grids.
• Grid Examples. Several examples of grids created using CSS Grid. Are you wondering how to get started? These examples will give you the perfect layout skels ?

Conclusion

We can finally define the layout of our websites independently from our content. CSS Grid will definitely revolutionize web design—it’s powerful and elegant. Learn this new technology and apply it to your new projects!

The future of web design is TODAY.

Featured Image by Dmitri Popov.