Issue 82

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.

mozilla.org


CSS Grid Layout Terminology, Explained

Another guide to grid terminology, this time from Ire Aderinokun.

bitsofco.de


Squeezy Stretchy Flexbox Nav | CSS-Tricks

Chris Coyier explains how to build a clever stretchy navigation bar using Flexbox.

css-tricks.com


CSS Grid Layout - Rachel Andrew | February 2017 - YouTube

A video of my talk on CSS Grid Layout, recorded at Frontend NE earlier this month.

youtube.com

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.

gorillalogic.com


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!

twitter.com


Box Alignment Cheatsheet - rachelandrew.co.uk

A cheatsheet comparing the Box Alignment properties as implemented in Flexbox and CSS Grid Layout.

rachelandrew.co.uk


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.

viget.com

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.

thecssworkshop.com