Issue 85
News
Issue 85
Today is the day we expected to see Grid in Chrome 57, however browsers started to updated last week so many of us had grid layout enabled in both Chrome AND Firefox in one week. A year or so ago Jen Simmons and I had discussed our dream that grid would land simultaneously in browsers - we've come reasonably close to that and we should see in in Safari pretty soon.
I posted a big set of grid resources last week, and there are some more this week, but I've also included some not grid things! I have a couple of weeks before conference season 2017 properly kicks off. I'm writing a bunch of brand new talks and can't wait to share them.
Rachel Andrew, CSS Layout News
Grid ships in Chrome 57
Hot on the heels of Flexbox, CSS Grid Layout has now shipped in Chrome 57. Browsers started updating last week. We can now watch the support figures climb in analytics with two browsers supporting grid!
Advanced CSS Layouts With Flexbox and CSS Grid - San Francisco
A little plug for my own workshop. I don't do many of these each year, so if you fancy spending a day digging into CSS Layout with me then this is one opportunity. I'm also speaking at the conference on the day before.
Learn
CSS Grid Layout: A New Layout Module for the Web | WebKit
Grid Layout is also shipping in Safari soon - it is in the current beta. The work on implementing Grid Layout in WebKit was performed by the same team at Igalia who did the work for Blink, the engine behind Chrome. Manuel Rego, one of those implementors gives an overview of grid in this post for the WebKit blog.
Simple Little Use Case for `vmin` | CSS-Tricks
"There is also vmin, which is the lesser of vw and vh, and vmax, which is the greater. "
It has to be said, I've often drawn a blank when thinking of a good use case when teaching vmin and vmax, here is one such use case explained.
World Wide Web, Not Wealthy Western Web (Part 1) – Smashing Magazine
Not layout directly, but very important as we get excited about new possibilities. Bruce writes about the World Wide Web and the fact that outside of the West people rely on Smartphones and expensive data to use the web. Bruce has also followed up with a part two of this article.
These are long pieces but well worth your time, and include practical information in addition to eye-opening statistics.
Design Better Cards
A nice article on designing better cards, something that seems very simple but hides a lot of detail. I like using "the simple card" as an example in tutorials because there is always more than meets the eye. This is a nice take from a design point of view.
On container queries. — Ethan Marcotte
After grid, the topic that I hear most about from experienced front-end developers is Container Queries. Here is an excellent article from Ethan Marcotte, explaining what they are, and why we need them.
Interesting
The Big Web Show #155: CSS Grid Layout is here, with Rachel Andrew
I chatted to Jeffrey Zeldman about Grid, and many other things.
Our Sponsor
Learn CSS Layout with me! From the basics to advanced new features.
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.