We will have 2 layouts for the Omega Responsive Grid: Wide (non-fluid) & Mobile.
Notes:
1) We will not go into how you have to change your CSS files
2) I will not have a RTL (RightToLeft) version.

Requirements:
Working Omega 3.x subtheme. Best practice not to have an underline "_omega" in your theme-name. Otherwise it will look strange in the hooked filenames (yourtheme_omega_omega....). If you are unsure on how to create a subtheme visit this page first.
In the following example my subtheme is called "ksno" (important! Replace ksno with your subtheme name!).

Note the [ksno_default] part! It must reflect your subtheme name, including the _default part.

Step 3 (create directories and css files):

Go into you subtheme folder and create the following structure (see the attached Image) grid/yourTheme_default/wide in your/sites/all/themes/yourTheme/css folder.
For this example my structure would be: sites/all/themes/ksno/css/grid/ksno_default/wide.

*Note the ../ksno_default/.. naming. It reflects to the [ksno_default] we put in your .info file in the previous step!

Copy the 2 files

alpha-default-wide-24.css
alpha-default-wide-24.png

from /sites/all/themes/omega/alpha/css/grid/alpha_default/wide/ into your/sites/all/themes/yourTheme/css/grid/yourTheme_default/wide/

rename those two files according to your .info file. In my example they are renamed to

See the attached File MyFileStructure.png for a look at the final structure. Also note the 27 reflects the 27 columns in my .info file.

Step 4 (edit your css Files):

Edit the css file to your need. You also need to resize the .png file , so it fits visually to your columns. (column width + gutter width)
It all depends what kind of columns and gutters do you have. I changed the files by hand. (Hey rome was build by hand, too... many hands!) You can generate your layout on http://grids.heroku.com/ and accordingly modify your css file.

*You can also skip this step, because it's the hardest. If all goes according to plan, you can edit them later. First you verify if the files get loaded. To do so let's continue to Step 5.

Step 5 (rename alpha-default*.css files)

You must also rename the ksno/css/ksno-alpha-default.css and ksno/css/ksno-alpha-default-{narrow,normal,wide}.css files to ksno/css/ksno-ksno-default*.css. This is because you have changed the alpha_default grids' name to ksno_default. Otherwise they will not be included.

Clear the drupal cache first, then go to your subtheme settings at /?q=admin/appearance/settings/yourTheme
In the "Grid Settings" tab, there is a dropdown at the top called "Grid System". The new Grid system you just defined in your .info file will be listed along with the Default 960 and Fluid grid systems. Choose your new layout and adjust the grid layout settings or media queries as desired and save the page.
Clear the drupal cache again. (you can never do this too much! ;-) )

I think you need to change the name of your CSS file to use hyphens "-" instead of underscores "_".

So if your subtheme is named "mysubtheme", then the CSS files would use this pattern:
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-normal.css
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-narrow.css
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-wide.css

@jshamley. Including the css files in the info file is a decisive step. I am trying to get my new grid to work. Not yet there. Question: are the css files loaded in the order they are listed? Are the css files in the 2nd and 4th line the same?

I originally couldn't get my grid to work, and had added the stylesheets manually like @jshamley did, but I found that the media queries here weren't getting the secret omega magic that makes them work on IE7 & IE8.

After a lot of troubleshooting and rereading the instructions on this page, I realized that I still needed to go into the theme settings in Drupal and enable the grid I had setup (bangs head on desk). Once I did that everything starting working (including in IE) and I didn't need the stylesheet declarations anymore. Just a quick note for others that the instructions here really do work even if you're deep in the .info file and it seems hopeless.

I also had problems with enabling my grid. Thanks to your comment I had finally succeeded to enable it! All I have to do is to revert to default 960grid and then again re-enable my new grid! Stupid caching problems.
Best option is to install Devel module and enable "Rebuild the theme registry on every page load". That will save you from headaches caused by theme registry cache.

So I've set up my custom grid and it works but how do I add my misc responsive css files since I would want to kept the styles and the grid styles separate? Like for example, I copied a starterkit to make into a subtheme. Then made the custom grid in the subtheme. What do I do to the css files (YOURTHEME-alpha-default.css, YOURTHEME-alpha-default-narrow.css etc) to make it work?

kim.le, this was driving me nuts too! After about 5 attempts, I read all the comments, and noticed that you also need to add the css files to the sub-theme .info file. I have added this as step 7 so that others won't have the same problem.
Hopefully that fixes it for you. It did for me! ;)

I have followed all the above, however, although the grid stylesheets are being picked up, it doesnt seem to be picking up the new grid settings, just using the alpha-mobile.css for setting the grid, regardless of display size...

Any ideas?

Also, baf139 mentioned the media queries. I changed these in the admin, although the info file doesnt update to reflect the changes? I would have expected this to update?

I've cleared my theme registry and all caches, cleared my browser caches to no avail. I see in alpha.inc where the overlay background image is concatenated (or not if path isn't valid) but I don't see why

Until I read a comment in the Omega issue queue: http://drupal.org/node/1843482#comment-6753212
I was very confused about how/why things were named in this tutorial. It's hard to follow the example since the grid name example matches the theme name and then uses a generic term like "default".

I didn't know if I should overhaul the complete tutorial above but perhaps this will help someone. I was trying to create a custom grid system with two different fluid grid layouts. So I named my subtheme "water" and my grid layout system is called "hydro".

(the water-hydro.css applies to both narrow & normal layouts but not the mobile layout)

I was struggling with getting my water-hydro-narrow.css and normal css files to load in the proper order as I couldn't find a way to both declare a media query and a weight for these files. Turns out if you just name them properly, the Omega theme will pick them up and you don't need to declare any custom CSS paths in your .info file at all.

I just added the following lines to my subtheme settings file (water.info):

Kendall I found, and I think others would agree, that the explanation is confusing. I am still not certain if I need to change anything in the .info file under THEME SETTINGS (Defaults) with my custom grid plus a few other questions. Is there somewhere a detailed explanation of what Omega does with the settings in the dot info file?
Thanks
Tony

I am confused, and I cannot see my grid png file, all kinds of other grid images but not the one I have created.

In step 5 you say:
"You must also rename the ksno/css/ksno-alpha-default.css and ksno/css/ksno-alpha-default-{narrow,normal,wide}.css files to ksno/css/ksno-ksno-default*.css. This is because you have changed the alpha_default grids' name to ksno_default. Otherwise they will not be included."

Thanks, dhalbert. I had issues until I read your post. Once I removed the lines I added as part of step 7, the grid overlay displayed correctly. Thanks for taking the time to list your files. It was very helpful.

I will say when I pick my grid in the "grid system" drop down, under media query for each layout, it just says "all" vs min-width:740px...which I think is the problem, but I can not seem to change these values.

I believe this follows dhalbert's advice, but responsive is not working. Any suggestions?

Never mind...while in the admin->appearance->settings->amomega, I copied the media query from the 960 layout for normal and narrow and pasted them in to my new layout and now it is working. I hope it doesn't blow up when I log out! Is this the way you are suppose to get the media query info?

As dhalbert mentions, step 7 is not needed. Here is an elaboration as to why it isn't needed.

Once the new grid system is chosen in the theme configuration settings,
the grid css files are automatically loaded.

However, by default, omega does not fill in the media queries for you in the configuration form so you need to do this on your own for each layout (this would be the real step 7).

Once you've done that, you can inspect the page and see the media queries are loading the grid files.

Another thing I found is that this line: settings[alpha_grid] = 'GRID_NAME' in the info file is not updated to reflect the new chosen grid system (this depends if the settings are maintained in code or the db).
Simply update it to the new grid name, for example: (the real, optional - step 8)
settings[alpha_grid] = 'mytheme_default'

Your various break-point css files will now load properly. If they don't, make sure you renamed the css files in step 5 correctly. The convention is:

First off, thanks for all the great info in this thread :)
It has helped me a lot!

There's only this one annoying thing I can't get to work properly.
When naming my custom grid I get an error and the name will not show up inte the drop down list where you select your grid. I get a blank entry that I can select and the grid system works.

I am using panels for the content area with layout omega-12-threecol-4-4-4 as the layout. I don't know if that is the problem. I just is weird that only the narrow is not working correctly. Why is it working with the alpha-mobile.css file for the grid. And yes, when I check the "head" with firefox inspect is is loading the amomega narrow grid.

What I want: Mobile/Phoneland to stack, Narrow, Normal and Wide to have 3 columns.

Is this possible? Any suggestions? I know I can fix the amomega narrow css but that sort of defeats the purpose.

I followed the instructions and got all my css files that I care about, to load. I haven't bothered with files like global.css right now because I'm not that far along. However, I have a huge issue! I edited my them to do a 13 column layout with an 18 px gutter and a 58px column and that worked, I think?

I tell my theme zones to be 13 columns across and then I divide my regions up. SIdebar one = 3 content=10 columns.

This breaks the theme. The blocks just want to sit on top of one another and not be side to side. What am I missing?

Any help would be great. I'm not ready for Omega 4 yet. Just now starting to learn sass and compass.