The Experimental Layout Lab

of Jen Simmons

Check back often. This will keep changing.

Includes examples for

Follow @jensimmons on Twitter for more as it happens.
Sign up for Layout Land, a place for us to show off new ideas for layout.

Workshop Examples

The header of this page is much more interesting in a browser that supports CSS Grid. Try Firefox Nightly, Safari Technical Preview, or Chrome Canary.

CSS Shapes

Shapes works in Safari and Chrome. It’s currently being implemented in Firefox.

Clip Path

Clip Path (using CSS without a SVG file) works in Safari and Chrome. Coming soon in Firefox.

Simple Image Cropped by Clip Path
[on CodePen]

Initial Letter

Initial Letter works in Safari 9+. There's a bad bug in Safari 9 that requires a workaround (see examples). The bug is fixed in Safari Technical Preview, and is expected for Safari 10. Initial Letter is currently being implemented in Firefox.

Multicolumn

Multiple Column Layout works has worked in browsers forever — including IE10+. There are some remaining bugs however, and we need break-before, break-after, break-inside to accomplish many design ideas. With some care, though, we can use multicolumn today.

Object Fit

Object-fit has terrific support. Object-position isn't supported in Safari 9, but will be in Safari 10. Mostly, we need the Edge team to add both.

“Cover sheet” Demo

This demo combines Viewport Units and Flexbox. It works in all browsers, just slightly differently in old version of IE.

Image Gallery Study

The CSS Grid examples require a browser that supports CSS Grid. It works best in Firefox Nightly.

Jazz Poster Grid Demo

These CSS Grid demos require a browser that supports CSS Grid.

Spices

These CSS Grid demos require a browser that supports CSS Grid.

Typical Layouts We Do

This demo mixes Flexbox and Grid, requiring a browser that supports CSS Grid.

We're Unique

CSS Mondrian Grid

These CSS Grid demos require a browser that supports CSS Grid. They work best in Firefox Nightly.

Space Jam

This CSS Grid demo requires a browser that supports CSS Grid.

Space Jam

Futurismo Posters

These CSS Grid demo requires a browser that supports CSS Grid.

Writing Modes

Rotation

Rotation is a 2D Transformation, which doesn't work in IE8 & earlier, or in Opera Mini. Oh well. Things can be straight in those browsers and rotated everyplace else.

Hexagon Layouts

I'm trying to figure out how to best do this layout. I want hexagons to nest, to be fluid, and I want them to automatically align themselves into different number of columns based on how much space there is. Sometimes 1 column, 2 col, 3col, 4col, 5col, etc. Hexagon 4 does this — alters the number of columns based on how much space there is. But I'm not sure how to get the hexagons to nuzzle up next to each other in Hexagon 4. I'm thinking named lines might help, which is why I used them in Hexagon 5, but that would only help if we could tell auto-placement to figure out what the next named line is in the available space. Something like "Hey go to the next line with this name" instead of "go to named line number 2". Of course, this could be done with a lot of long-hand specifying and a bunch of media queries. Basically Hexagon 2 or 3 with lots more code for multiple breakpoints. Or maybe there's a completely new way to go at this. Hmmmm.

The CSS Grid versions require a browser that supports CSS Grid. You also need a browser that supports Clip Path. If you use Firefox Nightly, flip the flag to turn on clip-path.