So. You might be going ”oh great, yet another new layout mechanism in CSS, and I was just starting to get to grips with Flexbox”. In that case, this post (and the rest of the series) is for you.

This post is not about code. Just to give you a taste of both some basics and some more advanced features, here's what (a small part) of the Grid syntax looks like:

/**
* Assume this markup:
* <div class="grid-container">
*   <div class="grid-item"></div>
* </div>
*/

/**
* A grid container element with one row
* of automatic content height
* and five columns, where the first
* is at least 12em wide and otherwise
* 25%, and the remaining four are of
* equal width in the space that's left.
*/
.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: minmax(12em, 25%) repeat(4, 1fr);
}

/**
* A child element inside the container
* placed in row 1, starting at column 2
* and spanning 2 columns.
*/
.grid-item {
  grid-row: 1;
  grid-column: 2/span 2;
}

At first glance, this might look sort-of-kinda like Flexbox. You set a display mode and some general layout rules on the parent, and some details on a child element. There's even some flexible units dealing with remaining space. Let's stay in flexbox-land for a second.

Flexbox is great. It gives us the possibility to size stuff in a number of different ways, and have it line up neatly in one or more rows, or columns. Yay for non-hacky horizontal layout! It also offers freedom from markup source order, and lets you align and distribute content more easily. From one perspective, the core strength of flexbox is to let content size itself based on things like available space, or the content dimensions. This is the first big conceptual difference between Flexbox and Grid.

Grid is top-down

Looking at the code example above, there is at least one major difference from how flexbox works. There is nothing in the rule-set for the item saying how it is to be sized. All the sizing takes place in the grid container. You make an element into a grid container, slice it into rows and columns at specific points along the two axes, and then place the child elements into the slots that are created.

Where Flexbox has a lot of focus on how to size the item itself, grid is more about creating a bunch of virtual receptacles and pouring your content into them. This doesn't mean that Grid is inflexible – as you can see from the code example, there's plenty of flexibility. You are free to size the columns and rows (known collectively as grid tracks) based on content size, remaining space, percentages etc etc.

This means that Grid is great for more high-level layout. You can use it to define the overall layout system of whole pages, but more likely, you'll use Grid to define the layout of larger sections of a page. We'll get more into the use-cases in later installments.

Grid is two-dimensional

When you're creating layouts with floats, table display modes, inline-blocks or Flexbox you can create horizontal rows – columns lining up from left-to-right or right-to-left. Some of these allow you to create wrapping rows. But as soon as you want to have one item spanning multiple rows, you'll need to further divide things with wrapper elements. For complex layouts, that can mean a lot of wrapper elements.

All of these methods are in a sense one-dimesional: you can create rows or columns, but not in any sense that make the two aware of each other. Grids are two-dimensional: you can create layouts as complex as you like. If you want a great illustration of the differences, check out this talk by Tab Atkins from CSSDay 2014. Meanwhile, check figure 1 – how many wrappers would you need to recreate that with floats or Flexbox? Grids make this easy-peasy.

Grid is coming soon

So, at this point, you may be going ”OK, maybe there is good reason for this new Grid thing. But it's not supported anywhere, almost!”. Well, yes, and no. Here’s the lowdown.

• All the major browser makers are on board with this spec.
• It is expected that the spec will be finalized this summer.
• Grid Layout is already supported in IE10+, but it's a slightly older version of the spec. It can still do the basics, but it's missing a lot of the new shiny. It's -ms--prefixed though, so you have to tweak the syntax slightly.
• Blink and WebKit are both very far along with their implementation, you can try it out in Chrome Canary or WebKit Nightly. The same people are implementing it in both engines, so they're pretty in-sync.
• Firefox is not far behind, and things are happening if you look in Bugzilla. Note: I think that the later stuff is not yet merged with the trunk codebase, so the nightlies only have a very buggy version hidden behind a flag inside about:config.

It seems very likely that Grid will land in all of the major browsers within a year, if I'm being conservative. IE is in a slight pickle, as they already have the old version with prefixes, so they'll probably hold off shipping the unprefixed modern spec in Edge a little while. I’d say it's a pretty safe bet that they are working to get it out ASAP. Safari is stuck in the stone age with their once-a-year release cycles, but hey, at least it' being worked on very actively in WebKit. If there isn't a change in policy and a point release contains Grid, it'll probably be in Safari iOS/Mac next year.

To sum up, there's a massive new layout technology that will be in a large percentage of browsers within a year. If you want to be ready, read on in part two!.

This article has been translated to Russian at css-live.ru.