UGrid Creator

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!