CSS, Omega theme - how to make a  use 2 or 3 grids depending on screen with? This question applies to Omega theme, but I think it is general to any responsive grid based theme. 

Is there a method to make a &lt;li&gt; occupy either 2 or 3 grids, depending on screen width?

In other words, when the body tag has class responsive-layout-wide then the &lt;li&gt; should occupy 3 grids (as if it had omega class grid-3) and when the body has class responsive-layout-normal it should occupy 2 grids (as if it had omega class grid-2). (The body class is determined using media queries by Omega theme)

Currently the HTML looks like this:

&lt;li class="mydiv grid-2-normal grid-3-wide"&gt; &lt;/li&gt;


At design time I don't know the screen width, so I applied both possible classes. So currently, despite of the screen width, the &lt;li&gt; width is always 3 grids because grid-3 is added last. Does Omega have any tools to make it dynamic?

The origin of this question lays here: http://drupal.org/node/1571938, unfortunately it is not explained to the end. The Views Columns Class module says: 


  So you can apply alpha to the 1st, 5th, 9th blocks and omega to the
  4th, 8th, 12th blocks but also apply alpha-mobile to the 1st, 3rd, 5th
  blocks and omega-mobile on the 2nd, 4th, 6th blocks. This gives the
  freedom to the theme to apply the styles that would render a display
  of 2 columns for smaller screen resolutions and 4 columns for larger
  screen resolutions.


So, I will end up having multiple styles for a &lt;li&gt; (like e.g. grid-2-normal and grid-3-wide) and my theme is supposed to react to screen width and intelligently apply appropriate style to change the &lt;li&gt; width. Width measured in grids (columns), not in pixels. But how this can be achieved, how to render a display of 2 columns for smaller screen resolutions and 4 columns for larger screen resolutions? Where "display" means a view display, not the whole page layout (that's what I think)
I don't know if Omega can do this out of the box, but I don't think so.  Some base themes that use the grid system can change a size based on whether a column next to it is empty, but this isn't one of those conditions.

Your best option is to use the grid-2 size in the config for that region, and then if you want it to be different, put an override for mydiv in one of the sheets that get enabled by the media queries (narrow, normal, or wide).  In your case you would add something like

.mydiv { width: 280px; }


to yourtheme-alpha-default-wide.css  The actual width will vary based on whether you are using 12, 16, or 24 columns, and you may need an !important, too.