When it comes to laying out content in a web browser, developers can use a variety of clever hacks and tricks, but at the end of the day there has never been a simple solution to create vertical space—until now. Enter CSS Grid, a game-changer to CSS’ display property.

Opening up an enormous amount of layout possibilities, this tool has the potential to lead to innovative layouts in 2018 that could change the way we interact with and understand content on the web. But how? Read on to find out!

CSS Grid: An Introduction

So what exactly is CSS Grid? It’s a display property that allows you to position content on a two-dimensional grid. As a result, developers have greater control and flexibility as to where they can position content, e.g., two rows from the top and three columns to the left and span for X amount of cells in either direction. This varies from Flexbox, another layout system that gives us horizontal positioning or vertical positioning, but not both at the same time.

It should be noted, however, that grid is not a replacement for Flexbox. Each has its own merits and in the end, they can work very well together. When laying out content, a developer will typically use grid for the structure of a website or application and then use Flexbox to position the elements within its children.

How Is Grid Used?

Grid comes with 18 properties. However, you only need to know a few to wield its awesome power. Here’s a 5×5 grid example that shows you how easy it is to have columns and rows that either have a fixed width, are percentage based or are sized with their new measurement, fraction (fr):


      .wrapper {
         display: grid;

         grid-template-columns: 50px 1fr 2fr 1fr 50px;
         grid-template-rows: 50px 1fr 2fr 1fr 50px;
      }

      #areaOne {
        grid-column: 1 / span 2;
        grid-row: 1 / span 4;
      }

      #areaTwo {
        grid-column: 1 / span 4;
        grid-row: 2 / span 2;
      }

      #areaThree {
        grid-column: 4 / span 1;
        grid-row: 3 / span 1;
      }
    

To learn how to use grid, I recommend checking out Grid Garden, a fun game created by Codepip. They also have Flexbox Froggy for those looking to learn how to use Flexbox as well.

Browser Support

In one the most incredible CSS updates, all major browsers added support for grid at the same time in March. The spec had been in development since 2012 and was released simultaneously across the board (FYI: support for Internet Explorer 10 and 11 requires the -ms prefix).

Source: Can I Use

What Does This Mean For Bootstrap?

Bootstrap gave us a 12-column grid and everyone used it because of its easy usability. It’s easy to learn, it’s easy to implement and everyone knows how to use it. Grid, however, is even easier to learn and gives us whatever grid layout we want. It’s just as easy to make a 19-column grid as it is to make a 12-column one. For me, I don’t expect Bootstrap to go away anytime soon, but it’s nice to know we can get back to writing our own grid systems with far less CSS than was required before.

A World Full Of Possibilities

via GIPHY

All in all, it’s an exciting time to be a developer with this latest addition to the CSS family. It’s still too early to see how exactly it will change the landscape of web design, but so far its advancements have provided much more freedom and flexibility than we’ve seen from a display property before. And I think that is definitely worth celebrating.