As people have started to work with CSS Grid Layout I’ve been getting more questions. Most of these could be easily answered by taking a look at the spec. I’m also seeing several popular articles and blog posts that quite obviously have not been based on a solid understanding of the spec, as they misinterpret features or make assumptions that don’t relate to the explanations there.
Why are we not referring to the spec? The whole point of browsers adopting “web standards” was that they would be following a standard specification which we, as web developers, could also follow when building sites. If we all work from the same document, the idea is that we build to spec, they render to spec and we all get to go home early. I’m aware that real-life doesn’t always match up to this utopia, but ask an old web developer, things are far better than they were even ten years ago.
I get that CSS Specifications are not the easiest thing to read. They are always going to be long and academic as they serve the purpose of describing to browser engineers how their engine should render a particular feature, in addition to explaining how we as web developers should use that feature. However this fact is why learning to read specifications is so useful. If something is behaving in a way other than you expected, you can take a look at the spec and see what instructions the browser engineers were following when implementing that feature. It’s something you need to be able to do if you want to start reporting browser bugs, as unless you know how something is supposed to work you can’t know if it is not working correctly.
Learning to read specifications also means you won’t always have your information filtered by “experts” – and I say this as a person who is often cited as one of those experts, who has taught CSS for years. If you completely rely on learning from tutorials written by other people then you always get your knowledge second hand, filtered through what they felt was important you know. This is obviously useful and time-saving, however being able to hop into the spec and check something that seems off or that seems to have left out some information is a great next step.
So, in the interest of showing you how to read specifications and because I’m tired of fact-checking other people, I’m going to start a series of blog posts working right through the grid specification. I’ll explain what the specific terminology means, and I’ll link to resources that demonstrate each part of the spec. Follow along and you’ll not only get a great understanding of the grid spec, but you’ll become one of those people who can refer to the spec, and your life as a CSS developer will get much easier.