I've been working with, writing and speaking about the CSS Grid Layout specification for around 4 years now. I get a lot of questions about how to use the spec via Twitter and email and so end up answering the same thing a number of times.
This project means I can answer things once and benefit more people!
Note: I'll answer reduced examples here. I can't offer free consultancy in terms of how to create your entire layout, or to debug larger issues. Sorry! If your question essentially is going to involve a bunch of work before I can even see what the issue is, I will ask you to do that.
- I will answer questions about CSS Grid Layout and related specifications.
- To ask a question raise an Issue
- Answered questions can be viewed by looking at the closed issues
- Try and keep questions to single things, eg: "how do I build this entire application layout?" is not something I'm going to answer, whereas "Here is an illustration of a component, how do I get these boxes to all be the same height?" is.
- A CodePen/gist/jsbin example if you have a code issue or a illustration (however rough) will really help.
Please post a reduced test case that shows your problems. Otherwise you are asking me to do that work for you. Remove everything that does not relate to the issue.
See this article by Lea Verou if you need to know what a reduced test case is.
Some frequently asked questions.
CSS Grid Layout is a CSS specification for two dimensional layout. You can find the specification here.
I have lots of small examples and a growing collection of video tutorials, in addition to links to other resources over at Grid by Example.
No. Grid is for a different use case than flexbox - although there are times you could use either spec. Here is a more complete explanation - Should I use Grid or Flexbox?
Grid is now shipped in the latest versions of Chrome, Firefox, Opera and Safari - including iOS Safari. Make sure your browser is up to date and you can see Grid Layout.
For more browser information and links to the meta bugs on the browser bug trackers see my page at http://gridbyexample.com/browsers.
I've written a cheatsheet detailing fallback and overrides that you can find on my site. Also take a look at the guide to progressive enhancement that I wrote for MDN.
Internet Explorer 10 and 11 and Edge use an implementation of the old specification, more details here.
I'm Rachel Andrew, I'm a UK web developer, writer, public speaker and co-founder of Perch CMS. I'm also a CSS Working Group Invited Expert and Google Developer Expert for Web Technologies. I like the web. I'm especially interested in layout.
- You can follow me on Twitter
- Read my blog
- Find out where I am speaking, or ask me to speak
- Buy my book about CSS Grid Layout
- Sign up for my online CSS Layout Workshop
- Send me an email
This project started due to a Twitter conversation. I thought it would be fun to do a workshop type thing where people ask me stuff about CSS Grid Layout and I build examples to answer the questions. Stuart Robson suggested the AMA format, and so here we are.