CSS Grid—The Future of Web Design is Already Here

Published in WordPress.

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.

Positioning components using the Grid—an upcoming CSS feature.
Example of how one can compose an advertising poster using simple HTML and Grid—a new CSS feature that’s (finally) supported by all major web browsers. Hurrah! 🙌

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:

Parrilla de 12 columnas de la web de la BBC
Grid with 12 columns shown in BBC’s website. (Source).

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:

Bootstrap Layout
BBC’s layout implemented using Bootstrap.

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! 😱

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):

Website without a concrete layout
BBC’s website blocks without any specific layout.

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:

Using CSS Grid to specify a layout
BBC’s website layout created using CSS Grid. Unfortunately, it’s not perfect yet—the first news should take 2 cells.

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:

CSS Grid Layout
BBC’s website layout created using CSS Grid solely. Simple and elegant solution that looks amazing!

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:

CSS Grid Garden
Learn how to use CSS Grid with this beautiful game.

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.

PoorNot badGoodGreatExcellent (2 votes, average: 5.00 out of 5)
Loading...

6 thoughts on “CSS Grid—The Future of Web Design is Already Here

  1. this article help to create a layout in the CSS grid and also explain how to use in the web designs. A proper guide has been provided thank you for the article

  2. The information you have provided in your blog is amazing. I am also a web developer but I am in learning stage right now and searching for some blog from which I can gain some knowledge about CSS Grid and web designing.
    Keep sharing like this.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.