UGrid Creator

probably the best grid generator

12 columns
950px
70px
column
10px
gap
24 columns
950px
30px
column
10px
gap
4 columns
950px
230px
column
10px
gap
12 columns
945px
65px
column
15px
gap
24 columns
945px
25px
column
15px
gap
12 columns
940px
60px
column
20px
gap
24 columns
940px
20px
column
20px
gap
24 columns
800px
18px
column
16px
gap

Columns: NO lock?

  • That's right! No need to worry, it's meant to be like that.
  • Number of columns has sort of a hidden lock, so you don't have to lock it.
  • Because of that hidden lock changing other parameters never affects columns.

Columns: value

  • Tip: use 24 or 12 columns for greater flexibility and well balanced layouts.
  • When you change it UGrid will recalculate other values for you.
  • When you change other parameters this one is never affected.
 
 
«
»
  

Page width: lock

  • When you change column or gap width locked page width is never affected.
  • Only certain column/gap sets are possible for every page width.
  • You can change locked value and UGrid will find matching column/gap sets.

Page width: value

  • Defines total width of your UGrid.
  • Some values are achievable only for certain number of columns.
  • UGrid will always help you with the closest possible value.
 
 
«
»
  

Column width: lock

  • UGrid will find all page/gap sets for your locked column width.
  • You can still change locked column width.
  • Page and gap width will adjust when you change locked column width.

Column width: value

  • This value tells UGrid how big is the basic column.
  • Column is where you place your content.
  • You can combine multiple columns into bigger one when you create layout.
 
 
«
»
  

Gap width: lock

  • UGrid will find all page/column sets for your locked gap width.
  • You can still change locked gap width.
  • Page and column width will adjust when you change locked gap width.

Gap width: value

  • This value tells UGrid how big is the gap between columns.
  • Tip: use from 5px to 20px for some balanced breathing space in your layouts.
 
 
«
»
  
 

Download includes:

 

Direct URL to this grid: http://webnicer.com/ugrid/creator.html

How does it work?

Basics

Every grid is defined by 4 parameters:

  • Number of columns
    Says how many basic grid columns make up the whole grid. One column like that is called "grid unit" to avoid confusion with layout columns later.
  • Page width
    Total grid width that you can utilise for your layout. It does not include any side paddings, so you know exactly how much space you have.
  • Column width
    The width of a basic grid column also called "grid unit". When you create page layout, each column's width you will define as number of grid units.
  • Gap width
    Space between columns also known as gutter.

Important note. Not every combination of parameters is possible. For example, if your grid has 2 columns and you set page width to 100px then basic grid column can only be less then 50px.

The good news is that you don't have to worry about the maths. UGrid calculates all possible combinations for you. Just bear in mind  that sometimes UGrid can correct your setting and use the closest value available. And it will tell you about it straightaway.

Interface

Most popular grids

Here you have at your disposal fine selection of most popular grid settings. The presets are guaranteed to have the highest number of downloads. They appear in descending order starting from Top #1 on the left hand side.

You can easily switch between grid presets with just one click. Preview below will refresh instantly giving you visual idea of how the grid structure looks like.

Design your own grid

Probably no other grid out there gives you the flexibility and ease of use that you get here. This tool is unique. What is so cool about it? Firstly, you can change every aspect of the grid and see the result in real time. There's more. In a nutshell:

  • at any time you can change any parameter you want including number of columns and page width
  • you can lock any one of the three widths - page, column or gutter - and for the remaining two UGrid will find all available combinations
  • sliders always take you through available values only
  • when you type in a value that is not achievable UGrid will replace it with the closest possible alternative
  • UGrid remembers the values of your choice and uses them to pick the combination which might be the most interesting for you

My favourite grids

This is your personal storage space for up to 8 grid presets of your choice. Operating favourites is pretty intuitive. I bet you have noticed the red heart icon next to the banner with current grid settings (just below navigation tabs on the right). It always shows you if the current grid is one of your favourites. Pale red - it is not, saturated red - it is. Clicking on the icon will toggle the "favourite" status of the current grid and will make it appear or disappear from your favourites.

To make things even easier, every preset in the favourites section has a little "minus heart" icon in its top right corner. Simply click the icon to remove the preset.

Favourites are saved in a cookie which should be retained for a year since your last visit to UGrid Creator. Please bear in mind that if you choose to delete your cookie or switch to another browser your favourite grids will be gone.

UGrid preview

The grid preview gives you visual idea of the grid structure. It is quite cool because it will refresh instantly after any change of grid parameters. That includes switching to another preset, manually tweaking widths or even number of columns.

In fact, the preview does much more than that. It has a nice measuring tool integrated into it. What is it for? When you create a layout usually you need to group basic grid columns together. Using the measuring tool you can quickly check what column widths are available for your layout with current grid settings.

The measuring tool appears as a reddish rectangle with a green pin icon, width in pixels above and width in grid units below. It always follows your mouse so you don't have to drag it. Click anywhere on the rectangle to pin it and the icon will change color to orange. Then move your mouse across the preview. The rectangle will change size following your mouse and you will see current width in pixels and grid units. Click again on the rectangle to unpin the tool and the icon will turn back to green. Easy.

Direct URL to this grid

This URL will open UGrid Creator with the same grid you can see in front of you. It's helpful if you want to share your grid settings with someone else. Simply copy the URL and send it. Your recipient will be able to see your grid instantly and download same bundle as you.

Download

The download bundle is always tailored down to your current settings. The whole thing is prepared to get you started as quickly and easily as possible. Let's see what's included:

  • HTML templates
    A few simple layouts already using the grid of your choice. Every template features FAQ and links to all CSS files included.
  • CSS files
    The heart of UGrid which defines all three UGrid building blocks - row, column and width shortcuts. As an add-on you get layout helper classes which define common page elements - header, contents and footer.
  • Photoshop grid
    Nice design booster script for Photoshop which quickly creates new document with a range of semi-transparent column overlays and guides. Again, using your grid settings.

Usual workflows

Usually when I start a new grid I do as follows.

  1. Pick a preset that is closest to my liking.
  2. Set number of columns.
  3. Set and lock the page width.
  4. Tweak the column and gap width.
  5. Download and build layout.

Sometimes I need certain column width. The best way to it:

  1. Pick a preset that is closest to my liking.
  2. Set number of columns.
  3. Lock and set the column width.
  4. Tweak the page and gap width.
  5. Download and build layout.

It's really that easy.

Thanks for stepping by and reading. If you have any questions please feel free to use Facebook comments below. And if you like UGrid please share the love and click some of the "like" buttons at the top of the page. Thank you!