Skip to content

Issue 83

Grid learning resources, scaling SVG clipping paths, and viewport units

Rachel Andrew
2 min read


Issue 83

The last day of February, which means that tomorrow is March and in March CSS Grid Layout will ship in Firefox, Chrome and possibly also Safari. Hooray! I've some posts this week that will help you get started learning grid if you haven't already.

Please don't listen to the myth that is being put around about how hard grid is to learn. It's a big specification for sure, however broken down it is very straightforward. If you have learned how to use a Grid framework, or battled with float-based grids then you absolutely have the ability to master this specification. I'll be continuing to create resources, and answering questions to help.

Most of my speaking this year will be around using grid in a production context. We'll be exploring how to use grid and other new layout, while supporting older browsers. I've had a little break from conferences and I'm looking forward to getting back to chatting with people about all of this.

I'm part of an online conference next week - Laracon online. The rest of the event is more for the PHP-ers, as it is a Laravel event, but I'm going to be talking about Grid and Flexbox. It's also only $20 a ticket - with 25% off if you use offer code SPEAKER.

Rachel Andrew, CSS Layout News

CSS Box Alignment shorthands - Chrome Platform Status

There are a set of shorthands for Box Alignment properties. Work has started to implement these in Chrome.

How CSS Grid Is Reinventing Webpage Design Event | | General Assembly

Jen Simmons is doing a full day workshop on design with CSS Grid in NYC on the 25th of March - and it's a free event! Limited tickets so sign up if you want a place.


Learn CSS Grid | Jen Simmons

Jen Simmons lists a whole bunch of CSS Grid resources - many of them mine and others that will be familiar to readers. It's a nice one-stop shop of good resources if you want to start learning about Grid Layout before it ships next month.

CSS Grid: Learning new layout - responsive - Bocoup

I love the comparison of old-school layout technique with Grid in this post, which promises to be the start of a small series.

Eric's Archived Thoughts: Scaling SVG Clipping Paths for CSS Use

Some excellent investigation and solutions for SVG based clipping with percentage coordinates.

The Unexpected Power of Viewport Units in CSS | Lullabot

A nice walkthrough of Viewport Units including diagrams and code.


Touch Devices Should Not Be Judged By Their Size | CSS-Tricks

A post about Interaction Media Features,

"These provide the capability to query a document based on the presence and accuracy of the user's pointing device and whether it has the ability to hover over elements."

Charles Hayter's colour diagrams

Colour diagrams recreated using CSS Grid layout. Requires a grid supporting browser!

Our Sponsor

CSS Layout training with video, code examples and tutorials

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 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.