It's here! CSS Grid finally lands in a production browser with the launch of Firefox 52. Chrome should follow suit next week, and Safari when the current beta ships.
In celebration - and because people have been creating some great content over the last week in preparation for grid shipping - this week is all grid themed. We'll be back to a mixture of layout-related fun next week. However today, celebrate with me the arrival of the grid :)
Rachel Andrew, CSS Layout News
I'm pretty excited to see grid layout land in a production browser. This is my post celebrating the news.
I have been working on a set of guides and glossary entries about CSS Grid for the MDN reference. We are still a little bit work in progress but all 11 guides are available now.
Chen Hui Jing has been writing some brilliant stuff recently and this post is no exception. A walkthrough of using CSS Grid along with Flexbox.
A lovely post from Jeff Bridgforth detailing his initial experiments learning grid layout.
A video from Jen Simmons introducing CS Grid Layout in Firefox and the Grid Inspector that is also part of Firefox 52.
A huge reference to grid over on Codrops, written by Chen Hui Jing.
"So if you’re thinking of grid as tables 2.0, please, stop. Table-style layouts are the first one percent of what grid offers. There are works of art and undiscovered techniques waiting in the other 99 percent."
Eric Meyer explains why Grid isn't tables, and shares his hopes for the things people might do with it.
"The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser."
I've distilled my knowledge about CSS Layout into this training course. This course has something for you if you are new to CSS, have been using frameworks for a while and want to understand how they work, or have been doing this for a while but want to understand the newer layout methods. The course includes video tutorials, text explanations and all the starting points to follow along.
The full table of contents gives an overview of what you can learn - at your own pace. We also have a Slack community where you can ask questions about the course materials.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.