What’s CSS Grid and Why Should You Care?

What’s CSS Grid and Why Should You Care?

Photo by Patrick Hendry on Unsplash

CSS Grid Layout, now supported in all major browsers, is rapidly becoming an essential tool in the front-end developer’s kit. So let’s take a good look at what this emerging framework is, how people use it, how it differs from other frameworks and how it’s bound to change the design landscape for good.

What is CSS Grid?

The CSS Grid Layout is the newest and most advanced CSS layout framework. The defining characteristic of CSS Grid is that it is inherently two-dimensional, while standard CSS layouts are only one-dimensional. Breaking out of the 1D limitation opens a world of possibility for designers that will take years to explore fully. Meanwhile, for many designers, CSS Grid is the long-awaited solution to the problem of designing highly sophisticated responsive page layouts in HTML and CSS without resorting to ad-hoc solutions that almost feel like hacks, often involving loads of JavaScript, PHP and more.

How you can use it

As designers use CSS Grid Layout in more projects every month, the new framework is rapidly going mainstream. As of Fall 2017, it’s already a safe bet to use CSS Grid for a significant fraction of your front-end projects, especially if the project is long-term. If you’re looking for great examples and templates to give you some inspiration, there’s no better place to start than Grid by Example, put together by Rachel Andrew, the brilliant designer responsible for most of the code in CSS Grid.

Difference from Bootstrap and Flexbox

For many designers, Bootstrap and Flexbox have been the solution of choice when facing the challenge of building responsive layouts, given the limitations of HTML and standard CSS.

CSS Grid vs. Bootstrap

Because of Bootstrap’s status as the leading grid framework, many designers are comparing it to the web-native newcomer: CSS Grid. Although Bootstrap doesn’t suffer from some of the backward-compatible concerns of the still-emerging CSS Grid Layout, it’s widely believed that CSS Grid is the future of layout design all the same. Not only is CSS Grid perfectly capable of reproducing nearly any layout built with Bootstrap, it often does it in a more efficient, elegant and open-ended fashion.

CSS Grid vs. Flexbox

Many CSS experts hold the position that CSS Grid Layout and Flexbox are complementary solutions that designers can and should use together. CSS Grid is at its best when building an overall 2D layout, addressing both rows and columns at any level of complexity. Flexbox, in turn, works well for 1D fine-tuning within the overall 2D layout to align and position the smaller pieces of content concerning a single row or column.

How CSS Grid is changing the design landscape

Now that it’s possible to efficiently and elegantly design highly responsive sites from directly within a 2D CSS framework, the bar for building responsive sites has is dramatically lower. We are likely entering an era in which highly responsive sites reach ubiquity almost immediately, and designers begin exploring far more sophisticated layouts that will redefine the notion of responsive altogether.

Lingering challenges

Like every emerging design solution, even one on its way to becoming the new standard, the CSS Grid Layout does face a few stubborn obstacles that may prevent it from becoming the most favored solution for at least a few more months. The most notable issue is browser-compatibility. Although CSS Grid is now compatible with the latest versions of all the key browsers (with the last major holdout Microsoft Edge finally announcing compatibility this month) millions of people still use old versions of browsers, and there are always situations, such as corporate legacy systems, that could raise justifiable concerns. Some have suggested that the answer is to have your CSS Grid-based layout automatically serve up the mobile version of your site in such situations. However, if this (or any other smart workaround) won’t work for you or your clients, then you might want to wait a few months before making CSS Grid your default design solution. All the same, it’s time to learn this emerging framework inside and out, as it’s only a matter of time before CSS Grid plays a big part in your design decisions.

The importance of a new dimension

The CSS Grid Layout is quickly catching on, and forward-thinking designers are beating the drum and singing its praises. This wouldn’t be happening if it wasn’t the case that the extra dimension provided by CSS Grid is far more than a responsive-layout expedient. Rather, it’s a vehicle for a more natural and elegant approach to layouts as a whole.

Wanna nerd out on design and dev? Hit. Us. Up.

Comments are closed.