Tags: grids



Quantity queries and Flexbox part 2 | Charlotte Jackson, Front-end developer

This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.

It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.

A Complete Guide to CSS Grid Layout | Chris House

This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.


Grid frameworks don’t get much more minimal than this—eleven lines of CSS:

.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
    .row { flex-direction: column; }
    .col { flex: 0 0 100%; }
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }

Should’ve been a gist really.

Gridset · Responsive Report 2014

Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.

NASA GeneLab

A beautiful website for ISS-based biology experiments.

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

On Responsive Layout and Grids by David Bushell

I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.

As David points out, it really needn’t be so complicated.

A New Canon | Journal | The Personal Disquiet of Mark Boulton

An excerpt from Mark’s forthcoming book, which promises to be magnificent.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)

Josh writes about the importance of using rules and systems as tools without being bound by them.

Toast | A simple CSS framework

This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

» Of Grids, Class Names, Responsiveness, and Lifecycles Bits Pushed Around

The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.

Responsive Advertising| Mark Boulton

A great in-depth look at the tricky problem of advertising in responsive design from Mark.

Mark Boulton on layouts and grid systems | Interview | .net magazine

In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

gridr buildrrr

A handy tool for planning grids. Limited, alas, to pixels.

The Grid System

The Grid System is a resource for all designers to learn about the benefits of using grid systems, golden ratios and baseline grids.