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
Basic Concepts of Grid Layout - CSS | MDN
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.
CSS Grid Layout Terminology, Explained
Another guide to grid terminology, this time from Ire Aderinokun.
Squeezy Stretchy Flexbox Nav | CSS-Tricks
Chris Coyier explains how to build a clever stretchy navigation bar using Flexbox.
CSS Grid Layout - Rachel Andrew | February 2017 - YouTube
A video of my talk on CSS Grid Layout, recorded at Frontend NE earlier this month.
Interesting
CSS4 Selectors: What Can We Expect? | Gorilla Logic
A guide to the current selectors under discussion for Level 4 of the CSS Selectors specification.
Exclusions discussion on Twitter
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!
Box Alignment Cheatsheet - rachelandrew.co.uk
A cheatsheet comparing the Box Alignment properties as implemented in Flexbox and CSS Grid Layout.
Do responsive sites have to be so tall on mobile? | Viget
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
Learn CSS Layout with me! From the basics to advanced new features.
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.