Skip to content

Issue 86

MDN Grid guides now in French, interaction feature queries, a use case for :not and more.

Rachel Andrew
2 min read

News

Issue 86

A wide-ranging set of resources this week, plenty of grid of course but also data tables, a gnarly flexbox bug fixed and a couple of design write-ups.

My calendar for 2017 is rapidly filling up but I would love to do more Grid Layout workshops - either public or in-house this year. If you would like some training on grid layout - and related methods from someone who really knows this stuff inside and out, drop me a line.

CSS Layout News


Update CSS Grid - Edge UserVoice

Your periodic reminder to go vote for updating CSS Grid support in Edge, and if you think your votes don't matter see this tweet.

uservoice.com


Bug 150445 – Flexbox - flex direction column slow layout performance

A resolution to a flexbox performance bug in WebKit that was a particular issue with flexbox frameworks that introduce nesting.

webkit.org

Learn

Grid “fallbacks” and overrides - rachelandrew.co.uk

Another cheatsheet based on my own notes, this one detailing possible grid fallbacks and overrides for other layout methods.

rachelandrew.co.uk


Playing with CSS Grids

A nice example and write-up of a CSS Grid based design.

14islands.com


CSS Grid and Grid Inspector in Firefox — Mozilla

Mozilla have put together a page with some grid demos and information.

mozilla.org


New side project: highlights minisite, and checking for interaction feature support

A nice write-up from Melanie Richards demonstrating a use case for interaction feature queries.

melanie-richards.com


Design Better Data Tables – Mission Log – Medium

Designing data tables is hard, this article contains lots of practical tips and advice to improve your tables.

medium.com


Hassle-free Full Bleed with *:not() - daverupert.com

An excellent use case for the :not() selector, which solves a common layout issue.

daverupert.com


Les concepts de base des grilles CSS - CSS | MDN

My articles and guides on CSS Grid Layout have been translated into French.

mozilla.org

Interesting

CSS Grid Layout is Here to Stay - Rego's Everyday Life

"Bloomberg uses Chromium and they were looking forward to having a proper solution for their layout requirements. They detected performance issues due to the limitations of the current layout modules available on the Web. They see CSS Grid Layout as the right way to fix those problems and cover their needs."

Lovely post detailing the collaboration between Igalia and Bloomberg that helped to bring us Grid.

igalia.com


Smashing Magazine redesign beta

I'm enjoying following along with the work that Smashing are doing to redesign their site, and I'm happy they have opened that process up as case studies from huge content-driven sites like this are valuable to all of us. Sara Soueidan worked on the front-end development and has written a case study about that work.

smashingmagazine.com

Our Sponsor

Learn CSS Layout with me! Master the basics through 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.

thecssworkshop.com

Newsletter