CSS Grid Ask Me Anything
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!
- 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 probably 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.
Some frequently asked questions.
What is CSS Grid Layout?
CSS Grid Layout is a CSS specification for two dimensional layout. You can find the specification here.
How do I get started learning CSS Grid Layout?
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.
Is Grid a replacement for Flexbox?
No. Grid is for a different use case than flexbox - athough there are times you could use either spec. Here is a more complete explanation - Should I use Grid or Flexbox?
Grid isn't working in my browser!
At the current time CSS Grid Layout is behind feature flags in browsers. It is very well implemented in Firefox, Blink (so in Chrome and Opera etc.) and Safari if you use the Technology Preview. The prefixed implementation in Internet Explorer and Edge is the original spec as developed by Microsoft, and at this point is quite different to the specification that is now a Candidate Recommendation.
For how to enable flags, more browser information and links to the meta bugs on the browser bug trackers see my page at http://gridbyexample.com/browsers.
If you are playing around with Grid I'd suggest using something like Chrome Canary or a Firefox Nightly as then you will be getting all the latest things that are implemented or fixed by the browser engineers much more quickly.
Who are you?
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
Why are you doing this?
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.