Skip to content

Issue 27

What is display: contents? Pattern libraries and updating clearfix.

Rachel Andrew
2 min read


Issue 27

Hello from Linz, Austria where I am speaking about CSS Grid Layout tomorrow. Before I left I did some experimenting with display: contents and you can see a link to a write-up of that and some code examples below. I'm going to follow that up with some thoughts about the method as used with CSS Grid Layout.

On my return to the UK, I will be getting things lined up for the launch of my CSS Layout Online Workshop - if you are interested in the launch offers or to find out more about that take a look at the site, and sign up to be notified.

Rachel Andrew, CSS Layout News


Vanishing boxes with display contents

In order to work out how much display: contents could be a solution to a lack of subgrid in Grid Layout, I needed to get my head around how display: contents works at all. I created a couple of examples and then wrote up how it works. Take a look.

HOW TO: Pure CSS masonry layouts — Medium

An in-depth look at how you can create masonry style layouts without relying on JavaScript.

Working with Pattern Libraries — Medium

A short article with links to further information, covering the benefits of working with pattern libraries.

The very latest clearfix reloaded

Thierry Koblentz explains why he thinks we should use display: block rather than display: table in our clearfix hacks.

Deep Dive into Grid Layout Placement - Rego's Everyday Life

Very detailed post explaining how positioning works in the CSS Grid Layout Spec from Manuel Rego Casasnovas who has been implementing this in Blink and WebKit.



Jonathan Garner has started a project where he tries to recreate book covers using HTML and CSS. A lovely idea for a learning project and the results are fun to see.

Responsive HTML Email Framework

Sometimes we have to build HTML emails, and this makes us sad. However here is a framework for creating responsive emails which gives a solid starting point.

Our Sponsor

Tired of struggling with CMS templates when implementing your designs?

Tired of struggling with CMS templates when implementing your designs?

Perch has a template system that is HTML-like, simple to use and gives you full control of your mark-up. Use Foundation, Bootstrap or your own CSS. Design and develop the way you want to, knowing that Perch has you covered for functionality when it comes to editing the site.