In fairly short order, the fr unit has become one of my favorite parts of the CSS Grid specification. If you’re not familiar… fr is a near-magical value that lets us quickly address the remaining space in a grid area.

In part 1 of our guide on icon systems, we focused on inline SVG and icon components. In this second article, we’ll take an in-depth look at SVG image sprites, SVG symbols and icon fonts.

In November 2016, I wrote an article in response to a question about Grid support in IE10 and 11. In that piece I wrote a quick rundown of what parts of the modern specification were supported in the older IE version. During a recent discussion onstage at An Event Apart, the issue of using the -ms prefixed version came up. As Jeremy Keith has documented his thoughts on that discussion, I thought I would post mine as a response to his post and also as an update to my previous article.

For many front-end developers, components have become a central concept in their development workflow. Components provide a robust model for architecting and scaling complex applications, allowing for composition from smaller and simpler encapsulated parts.

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.