Skip to content

Issue 67

Grid, flexbox, calc, writing modes and Ask Me Anything (about Grid Layout)

Rachel Andrew
2 min read


Issue 67

A fair number of Grid Layout links this week, to be expected as we get ever closer to actually having this in our hands. I'd love to see more creative examples of what can be done with Grid Layout or any of the newer CSS specifications that deal with layout.

I'm also trying to make sure this email doesn't become only about grid layout, as excited as I am about it! After sending this I'll be heading off to Brighton for ffconf. Perhaps I'll see some of you there!

Rachel Andrew, CSS Layout News

Ask me anything about CSS Grid Layout

I'm getting an increasing number of questions about CSS Grid Layout so I've set up a GitHub AMA. If you have questions, post them as an issue and I'll go through and answer and build examples to help.


CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

A very long article I've written explaining the differences and similarities between Grid and Flexbox.

Getting Started With CSS calc() – Smashing Magazine

I was looking for some resources to link to alongside a new talk I'm working on, and found this by Ana Tudor on Smashing Magazine. A fantastic primer on calc() with some nifty ideas for using the function.

Chinese language on the web

An in-depth article on Chinese text on the web. Even if you never have to format Chinese text this is also a useful read in terms of writing modes.


Design Principles

A collection of design principles, helpfully collected by Jeremy Keith.

Interior System

Back in Issue 37 I linked to an article by Morgan Feeney - Don't build a Bootstrap style grid-system with Flexbox.

Morgan has since evolved these ideas into his own system, currently based on flexbox, and has put it online. Perhaps his ideas will help some of you to develop your own systems rather than relying completely on third parties.

CodePen - Japanese Book Cover Reinterpreted via CSS Grids

CSS Grids and writing modes are used in this Japanese book cover design.

Our Sponsor

A CMS made for a beautiful web, and happy clients

A CMS made for a beautiful web, and happy clients

We believe that content management systems should manage content really really well, and leave the design and front-end code to you. That's why when you use Perch or Perch Runway you have full control of everything the CMS outputs.

With Perch and Perch Runway 3 now announced and shipping soon, with a redesigned UI and features such as a headless CMS mode, this is the perfect time to Grab a Perch.