Issue 82
Lots of Grid Layout plus responsive patterns and navigation, Box Alignment and Level 4 Selectors
News
Issue 82
I have been doing a lot of CSS Grid related writing over the last week. My first guides have gone up on the MDN website, getting ready for Grid to ship in Firefox. I've also been working on another project I will be talking about soon. I'm really looking forward to Grid actually being shipped in browsers, mostly because it will be interesting to see what people do with it in production.
More than just Grid stuff this week though. We have a nice navigation example, a walkthrough of proposed Level 4 selectors and some ideas for responsive patterns that aren't just creating a very tall site on mobile.
Rachel Andrew, CSS Layout News
Learn
I am writing a series of guides to grid layout for MDN. The first four are now online. Start with this overview of the basic concepts of grid layout.
Another guide to grid terminology, this time from Ire Aderinokun.
Chris Coyier explains how to build a clever stretchy navigation bar using Flexbox.
A video of my talk on CSS Grid Layout, recorded at Frontend NE earlier this month.
Interesting
A guide to the current selectors under discussion for Level 4 of the CSS Selectors specification.
I periodically like to post about CSS Exclusions, the spec that would let us flow text round all sides of an element. I hope that eventually it will become implemented in more than just IE/Edge.
I've reposted some examples I created last year to Medium. If you like the look of Exclusions, talk about it, let the browsers know this would be useful!
A cheatsheet comparing the Box Alignment properties as implemented in Flexbox and CSS Grid Layout.
Kevin Vigneault asks whether there is an alternative to just displaying all your content in a long line on mobile, and comes up with some suggestions.
Our Sponsor
CSS is more logical than you might think - once you know why things work the way they do. Let me show you how CSS layout works from the ground up. Master the basics right through to new features such as Flexbox, Shapes and Grid.