Using multiples of 8 to define dimensions, padding, and margin of elements.

CSS Grid vs. Table — In Hand To Hand Combat

Grid related demos.

Luckily for us, solutions exist to the problem of creating fast, responsive, fully customizable grids: Susy is a Sass-based grid framework. It’s very lightweight and enables you to create entirely custom grids in CSS without touching your markup.

certainlyakey starred bbc/gel-grid

Layout seems to be a hot topic at the moment, mostly prompted by the ALA redesign and the numerousdiscussions of the choice by Jasonand the ALA team to go 1024 for a fixed width. I’m not going to go into my thoughts on ALA in too much depth here, there’s been a lot of that already, but it seems like the right time to get this article out.

For all of the advantages the web has with distribution of content, I’ve always lamented the handiness of theWYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

Susy is a helper tool that lets you created ultra customizable grids on the fly easily.

For the last several months, I’ve been using a Sass grid system called Neat. It’s done almost everything I need and it’s pretty easy to get started with. However, lately I’ve found myself writing extra styles to augment the Neat grid. Rather than extend it on my own, I decided to find a Sass grid system that was more powerful. That system is Susy.

I have been writing and speaking about the CSS Grid Layout Module for some time now. In order to learn how Grid works I’ve put together lots of small examples, and I am publishing them here as a resource for anyone else interested in this emerging specification.

The grid isn't primarily a visual design tool, it's a user-experience aid - like lanes on a street. via Pocket

We still build things the way machines read them - not the way we intuit them. Jeet allows you to express your page grid the same way a it. No more needlessly nesting elements. No more rigid twelve column rules. with less code, and more flexibility with

In 2012 and again in 2013, we ran a survey investigating the struggles of modern web design. More specifically, the surveys dug into responsive design, and how it affected workflow for web workers in all sorts of situations.

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

Historic background and reasons for using grids

Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.
Contains a list of common problems of responsive layouts.

The tool for quick design modular grid in Adobe Photoshop, Adobe Fireworks, and in browser.

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.

It's quicker to use than a spreadsheet, and smarter and clearer than a traditional calculator. Use Soulver to play around with numbers, do "back of the envelope" quick calculations, and solve day-to-day problems.