Groups do not participate in Grid layouts

If there is a `VGrid` or `HGrid` which includes one or more `Groups` then the groups are laid out vertically rather than in a grid:
```
from traits.api import HasTraits, Str
from traitsui.api import View, VGrid, HFlow, HGroup, VGroup, Item

class Test(HasTraits):
s = Str()

traits_view = View(
VGrid(
VGroup(
Item('s', label='one'),
Item('s', label='two'),
),
VGroup(
Item('s', label='one'),
Item('s', label='two'),
label='foo',
),
VGroup(
Item('s', label='one'),
Item('s', label='two'),
Item('s', label='three'),
),
VGroup(
Item('s', label='four'),
Item('s', label='five'),
),
columns=3,
),
resizable=True,
)

t = Test()
t.configure_traits()
```
This displays as:

For comparison, Groups do participate in `HGroup` and `VGroup` layout.

Also note that because of the way that `ShadowGroups` are created, mixing `Group` and `Item` elements in a `Grid` produces even more unexpected results:
```
View(
VGrid(
VGroup(
Item('s', label='one'),
Item('s', label='two'),
),
VGroup(
Item('s', label='one'),
Item('s', label='two'),
label='foo',
#show_border=True
),
VGroup(
Item('s', label='one'),
Item('s', label='two'),
Item('s', label='three'),
),
VGroup(
Item('s', label='four'),
Item('s', label='five'),
),
#label='bar',
#show_border=True,
columns=3,
),
resizable=True,
)
```
gives

That is, the runs of items are accumulated into `ShadowGroups` which are seem to inherit the `grid` layout.

Plus as a secondary issue, the code for creating the groups (in the various `ui_panel.py` modules) is fairly horrible.

Reproduce the supplied VGrid and HGrid examples, including the mixed Group and Item case. Inspect the group-creation code in the various ui_panel.py modules and how ShadowGroups receive their layout. Done means Groups participate in Grid layouts correctly and mixed Group/Item grids no longer produce the unexpected arrangement described.

Written by the indexing model from the issue text.