From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
When you first start planning a web design project where do you start? Color scheme, fonts?
Probably not. Most of us start with a sketch outline of the site’s structure.
And a big part of this structure lies in the grid – a vertical set of guidelines that help determine shape, placement of items and overall look of each website.
There are a variety of grid-based structures. A grid can be made of multiple columns and gutters of equal widths. Grids can also be created from columns of varying widths, a technique commonly used when outlining the body of a website that will include sidebars. (Often in this scenario, a separate grid exists within the website body to help create a sense of order.)
Column Grid
Every vertical grid is comprised of two things – columns and gutters. Columns are the wider divisions, while gutters are defined as the equal spaces between columns. Even when a grid contains columns of varying widths the gutter widths are most often static.
Web grids vary widely and there is no magic formula for number of columns or width of gutters. Often web grids range from a two-column format to 12 columns. (Depending on the width of your site, anything more than 12 columns will create columns so thin that you will not benefit from the creation of a grid.)
When using a vertical column-based grid, the lines are typically invisible and only known to the designer or developer. What these lines do though is create a plane for all the objects – text, images and even ads – so that everything lines up neatly. This will create a distinct organization and overall sense of harmony.
Build a Grid
The first step in creating a grid is to set your constraints. How wide will your page be? (And are you accounting for varying browser widths?)
When designing the grid, think about how elements will live within the columns. Are you planning to design strictly in column and rows, such as a site like J. Crew or is your grid going to be used more in a way that looks “less gridded?”
Then you want to think about flexibility in design – how many columns you want to work with. Ideally, you will work in sets of threes or fours, so that you have divisible groups that can be broken into smaller parts. When considering the number of columns in your grid, also take gutter widths into account. Commonly, gutters are 10 to 20 pixels wide.
Then it is time to do the math.
Determine your overall site width. Set a gutter width. Determine the number of columns. Take your overall width minus the gutter widths (keep in mind that you have one less gutter than total number of columns). Divide the remaining number by the total number of columns to get a width for each column.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Responsive Grid
One of the main things you will want to consider when looking at grids is the ability of the grid to be fluid. Because of all the different browser widths, tablets and mobile devices being used to view each website, the ability of a site to accommodate each platform is important.
You will also want to think about what parts of your grid you want to be affected and how. Do the columns change widths? Or do parts of the site vanish? What about gutter sizes? Your key choices here are to determine if you want items to scale proportionately or if your design allows for changes to the look based on device or browser size.
The hardest part of designing a grid for responsive design can be the math. There are so many formulas and ratios and equations to account for. This is where some pretty awesome tools come in.
Grid Design Tools
Columnal: An 1,140-pixel wide grid design that allows for the widening and shrinking of browsers in responsive design. The “elastic” grid contains columns and sub-columns to optimize sites at almost even width, including mobile.
1140 CSS Grid: A grid system that is fluid and uses 1,140- and 1,280-pixels as the basis for a 12-column grid. This 12-column structure then divides into grids of two, three, four or six columns to accommodate for changes in browser width.
960 Grid System: Create a grid based on a width of 960 pixels with varying numbers of columns. The beauty of the 960 grid system is that it contains multiple grids so that it looks almost as if you are using no grid at all.
Frameless: The Frameless grid contains fixed-with columns that help you adapt to different browser sizes. It helps you plan and design for mobile without being a traditional responsive design grid.
Elliot Jay Stocks: A better Photoshop grid for responsive web design takes the math out of responsive design for you. Check out his Photoshop design.
Responsive Grid System: Fluid grid CSS framework with 12, 16 and 24 columns plus media queries for all standard devices.
SimpleGrid: Responsive grid with one class for all units of a single size making it self-aware and intuitive to use.
Gridpak: A generator that helps you create a responsive grid. You can add the number of columns, padding and gutter width and it will generate all the files you need.
Skeleton: Skeleton’s base grid is a variation of the 960 grid system. The syntax is simple and it’s fluid down to mobile.
Golden Grid System: Golden Grid System (GGS) helps creating a fluid grid layout where 16 columns can be combined or folded into 8 columns for tablet-sized screens and into 4 columns for mobile-sized ones.
Zen Grids: If you use Sass then Zen Grids might be interesting. It’s a responsive grid system built with the power of Sass.
Responsify: Easily generate your own responsive grid template and preview it on different screen sizes with this online tool.
Gridiculo.us: A fully responsive grid boilerplate that takes you all the way from 1200px down to 320px.
Fluid Baseline Grid System: Build with typographic standards in mind, the FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries.
Twitter Bootstrap: Twitter Bootstrap gives you all the HTML, CSS, and Javascript for the most popular user interface components and interactions. It comes with a robust responsive 12-column grid system that will ease the development of your whole project.
Analysis
So all of this might look like too much to think about. Grids are a lot of work.
But they are totally worth it.
You need a grid. Don’t let anyone convince you otherwise.
A grid structure creates the necessary outline for so many aspects of your website. It helps you create balance and harmony. It gives you a set of rules of alignment and image scaling. The grid can even help you determine what size your body font should be. (As a guideline, start with 8 point type in a 100 pixel column and increase the font by two points for every 100-pixel increase in width.)
A columnar grid can also help you make choices about the horizontal spaces on your website, when you use it in conjunction with principles such as the golden ratio and the rule of thirds. Combining these mathematical properties can help you create a simple and beautiful design that just feels right.
Finally, you must think of responsiveness as part of your grid design. There are just too many users on too many devices out there to ignore the importance of the ever-changing grid. Don’t be intimidated by the math, use a web calculation tool and make sure your site outline accounts for a variety of possibilities.
I think Bootstrap shouldn´t be left in this list.
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Great article on grids! I knew most of them but some of them are new to me. I might have to give them a shot and see if they are a better fit for me. Thanks for the info!
Great article. Tremendous help.
Thanks
nice article…
Great article. Thanks for the extensive list of grid/responsive frameworks, more than i knew about. You left out Foundation http://foundation.zurb.com/. I think its pretty new and looks very promising with saas being the css processor.
Awesome Carrie! You wanna design responsively? A grid is must. Thanks!
You forgot a gr8 addition to these tools is JQuerin Grid Builder ..Its real easy to setup..gives semantic code
Try It
Awesome! this article comes just in time, I’ve been planning on starting with responsive layouts recently 🙂 This is going into my bookmarks 🙂
I love Tympanus <3
What about Taiga Boilerplate? It’s a semantic grid in SASS.
You basically include a mixin on a div, article or section (or whatever you want). So you don’t need classes like span-8 or col-4.
Taiga works with 48 fluid columns, the width of those 48 columns are based on the maximum width of the container.
To setup your grid (let’s say an article on the left and an aside on the right) we could do the following:
‘article { @include grid(36, 1); }’ (this makes the article 36 columns and a column margin on both sides)
‘aside { @include grid(12, 1); }’ (this makes the aside 12 columns and a column margin on both sides)
And you can use padding and border in the article or aside, because Taiga uses box-sizing: border-box; This means you can prevent to much nesting for rows etc. Also everything else works with em units, which makes it very easy to adjust the whole size of the website.
http://taigaboilerplate.com/
I *love* ZURB’s Foundation framework. Easy to use, 12 column responsive grid, plenty of features, SASS (only if you want it), and light weight.
Foundation 3
http://foundation.zurb.com
Cheers!
Yes, I´d like to double that: I built a website with foundation lately and found it easy to deal with, providing many extras like tabs, toggles, tooltipps… and even a slider (orbit). Superb!
And there´s another framework I´d like to mention here: Inuit, which provides a grid-builder on the site, and “igloos”, plugins to extend the framework (one of those makes the grid work even in bad old IE6!).
+1 Zurb’s Foundation!
Thanks for the sum-up and the tips. Gonna use one of those or my next project.
Yup, Foundation has the best GS. And it’s better than Bootstrap also as a framework, IMHO (partly because it uses SASS instead of LESS).
nice article!
good good
I prefer ZURB Foundation, used it on some projects and also for WordPress (Reverie Framework) sites. Latest is http://www.responsivedesigntest.net
Yes, in my opinion the best Grid System / Framework is Foundation3 from Zurb!! Better to handle than Twitter Bootstrap!!
Great article – however, I didn’t quite understand your comment about sticking to a max of 12 columns? I’ve used e.g. 24 columns for more flexibility when laying out pages (combining groups of grid columns into layout columns). It can get a bit complex, but provides almost no limits to how a page can be laid out 🙂
I think that semantic.gs should be listed here.
=)
Awesome collection Carrie, is there any easier online tool to create empty grid and allows to enter the items in the grid?