locked
How can I make a grid within a grid?

    Question

  • What I want to do is to have an app with an overall grid structure.

    Then I want to have a grid inside one of the divs in the app that would contain some labels and controls.  (HTML/CSS/JS)

    I am not finding documentation for how to do this and so far my experiments aren't working.
    Have a pointer to an example or documentation?


    --Scott.

    Monday, August 27, 2012 3:14 AM

Answers

  • Your top level div would have this style:

    {
    display: -ms-grid;
    -ms-grid-columns: <whatever you need here>;
    -ms-grid-rows: <whatever you need here>;
    }

    The child div would then both indicate its placement in the parent, then define a grid of its own:

    {
    -ms-grid-column: <column within the parent grid>;
    -ms-grid-row: <row within the parent grid>;

    display: -ms-grid;
    -ms-grid-columns: <column layout for this child>;
    -ms-grid-rows: <row layout for this child>;
    }

    I use nested grids like this all the time, no problem. However, if you don't get the row and columns declared properly, it won't work right.

    I highly recommend using Blend for Visual Studio for doing layout work like this (it's part of VS Express) as you can see the results right away.

    I can also suggest from experience that if you want to lay out a number of labels and controls, e.g. in a vertical list, you might find that an HTML table also works well as the child element.

    .Kraig

    Monday, August 27, 2012 3:45 PM

All replies

  • Your top level div would have this style:

    {
    display: -ms-grid;
    -ms-grid-columns: <whatever you need here>;
    -ms-grid-rows: <whatever you need here>;
    }

    The child div would then both indicate its placement in the parent, then define a grid of its own:

    {
    -ms-grid-column: <column within the parent grid>;
    -ms-grid-row: <row within the parent grid>;

    display: -ms-grid;
    -ms-grid-columns: <column layout for this child>;
    -ms-grid-rows: <row layout for this child>;
    }

    I use nested grids like this all the time, no problem. However, if you don't get the row and columns declared properly, it won't work right.

    I highly recommend using Blend for Visual Studio for doing layout work like this (it's part of VS Express) as you can see the results right away.

    I can also suggest from experience that if you want to lay out a number of labels and controls, e.g. in a vertical list, you might find that an HTML table also works well as the child element.

    .Kraig

    Monday, August 27, 2012 3:45 PM
  • Thanks for reminding me to try it in Blend - it did help to see it there.


    --Scott.

    Tuesday, August 28, 2012 12:54 AM