Google is committed to advancing racial equity for Black communities. See how.

When building a Web Application, one of the first things that's needed is a way to lay out the content of your app.

Lots of designers use imaginary grids to lay out content, whether it's for a site or app. The CSS group has been working hard to make layouts easier, and as part of that have produced the CSS Grid Layout Module which is now emerging in browsers.

This feature is available to try out in Chrome behind an experimental flag. It's also implemented in IE since version 10, and likely to be in most browsers soon.

Executive summary

CSS Grid Layout lets you define rows and columns for your layout

Grids can adapt to make use of available space

Content order can be independent from grid container display order

Layouts can change based on media queries, making responsive design easier

Content can overlap (enabling layout that's impossible with other methods)

Grid Layout is fast

Here's an overview video that explains a lot about how CSS Grid Layout works (slides are here:

Try it out

Using CSS Grid Layout in Chrome now is easy. First thing you need to do is turn on the experimental flag to enable the feature.

First load the chrome://flags URL and scroll down to the option to Enable experimental Web Platform features as shown below:

Just click Enable to turn the flag on, and you should see a prompt to restart the browser that looks like this:

Now just click the Relaunch Now button to restart your browser and you'll be all set to try out CSS Grid Layout.

Let us know what you think

CSS Grid Layout is a great new primitive for web content, but as usual we're all keen to hear what developers think about it. There are lots of ways to give feedback - leave a comment here, send mail to the W3C CSS Working Group list with "[css-grid]" in the subject line, log bugs, or blog and tweet what you think of it. We look forward to seeing the great layouts you build with this super useful new feature.