How to align grid dividers of inner grids in a grid?

Question

How to have the vertical dividers of inner grids aligned to each other in the following?

Grid[{
{"12",Grid[{{"1","2"},{"foo","bar"}},Dividers-> All]},
{"xxxx",Grid[{{"1","2"},{"foooo","barbar"}},Dividers-> All]}
},
Dividers-> All
]

Answer 1

You can play with ItemSizes to make sure that the itemsizes in the two sub-grids are in alignment. For example:

  Grid[{{"12",  Grid[{{"1", "2"}, 
   {Item["foo", ItemSize -> {5, 3}], 
  Item["bar", ItemSize -> {10, 3}]}}, Dividers -> All, 
     Alignment -> {Center, Center}]}, {"xxxx", 
  Grid[{{"1", "2"}, 
  {Item["foo", ItemSize -> {10, 3}], 
    Item["barbar", ItemSize -> {10 - 5 + 10, 3}]}}, Dividers -> All,
     Alignment -> {Center, Center}]}}, Dividers -> All, 
   Alignment -> {{Center, Center}, {Center, Center}}, 
     ItemSize -> {{{10, 30}}}]

Given the two column widths {x1,y1} for the top sub-grid, and the column width of the first item in the lower sub-grid x2, the second column width is determined by

 y2 = y1+ x2- x1 

Of course, you also need to add the costraints that x1+y1 = x2+y2 = cw = column width of the second column in the enclosing grid, and that each column width is wide enough for the cell contents etc...

Update: A more flexible, yet still manual, approach is to wrap sub-grids in Pane and use Alignment option of Pane as suggested in halirutan's answer to a related question.

Manipulate[
 Grid[{{"12",
       Pane[Grid[{{"1", "2"}, {"foo", "bar"}},
             Dividers -> All, Alignment -> {Center, Center}],
         ImageSize -> Full, Alignment -> {x12, Center}]}, {"xxxx",
       Pane[Grid[{{"1", "2"}, {"foooooooooooooooooooooooo", "barbar"}},
             Dividers -> All, Alignment -> {Center, Center}],
        ImageSize -> Full, Alignment -> {x22, Center}]}}, 
   Dividers -> All, Alignment -> {Center, Center}, 
   ItemSize -> {{{40, 10}, {40, 10}}}], 
 Grid[{{Control[{{x12, Center, "x12"}, {Left, Center, Right}}], 
       Control[{{x12, 0, ""}, -1, 1, Appearance -> "Labeled"}]}, 
      {Control[{{x22, Center, "x22"}, {Left, Center, Right}}], 
       Control[{{x22, 0, ""}, -1, 1, Appearance -> "Labeled"}]}}]]