Grid Style Sheets 2.0


GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.

Using Constraint CSS and GSS Selectors it’s really easy to, for example, make two elements have the same width:

.container {
  &[width] == #elm[width];

Next to CCSS and GSS, I especially like the Grid-Flavored Visual Format Language to position elements relative to each other. Think of the helper lines you see when positioning things in applications like Keynote. This snippet below for example:

@h |-50-(#purple-box)-50-| in(#container);

Translates to this:


Extending on this basic example it’s every simple to distribute elements – both horizontally as vertically – evenly inside their container/parent. In the screenshot above the buttons at the bottom are distributed horizontally using this VFL snippet:

@h |-(#message)~-~(#follow)~-~(#following)-(#followers)-|

Grid Style Sheets →
Grid Style Sheets Presentation (PDF) →
Grid-Flavored VFL →
Cassowary JS →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.