Using the grid on the artboard

The -ms-grid control lets you design a grid layout without using HTML tables. This gives you precise control over how your page layout works without breaking accessibility for your app. Blend for Visual Studio 2012 lets you design the layout visually.

Rows and columns can be defined to have a fixed size or a fractional size. Fixed size rows and columns can be specified in pixels or percentage. Fixed-size rows and columns that are specified to have pixel-defined dimension will keep the defined dimension when the grid is resized. Fractional row and column sizes will change size as the grid is resized.

For example, if one column is defined 1fr and another 2fr, the two columns will be displayed so that the second one is twice as wide as the first column, regardless of the size of the grid.

Rows and columns can also be defined to fit their content by using Auto.

To create a blank app

1. From the File menu, choose New Project.

2. In the New Project dialog box, choose HTML (Windows Store), then choose Blank App, and then click the OK button.

To create a container div

1. From the Assets panel, expand Elements and choose <div>. An empty <div> is added.

2. In the Live DOM panel, double-click the <div> element and specify the ID container for the <div>, then press the Enter key.

3. Right-click on container and choose Create Style Rule from Element ID. A new style rule is added to the Style Rules panel and is displayed in the Applied Style Rules section of the CSS Properties panel.

4. In the CSS Properties panel, expand the Sizing section. For both the width and height, type 100%.

5. In the CSS Properties panel, expand the Layout section. In the display drop-down menu, choose -ms-grid.

To add columns and rows to the grid

1. Select container in the Live DOM panel, or select either Winning Properties or #container in the Applied Rules section of the CSS Properties panel.

2. Move your mouse cursor over the top grid adorner. An orange insert column adorner appears.

   

3. Click to add the grid column adorner.

4. Repeat to add one more grid column adorner (thus defining three columns).

5. Move your mouse cursor over the left grid adorner. An orange insert row adorner appears.

   

6. Click to add the grid row adorner.

7. Repeat to add one more grid row adorner (thus defining three rows).

To adjust grid and row sizes

1. Move the mouse pointer to the top of a grid column. The Fraction (fr)/Pixel (px) drop-down is displayed (the default setting is fr for fractional).

   

   Click the fixed/fractional drop-down and select Pixel (px) to set the selected column to fixed size.

2. Set the first and last columns to fixed (px), leaving the middle column at Fraction (fr).

3. Set the first and last rows to fixed (px), leaving the middle row at Fraction (fr).

4. With container selected in the Live DOM panel and either #container or Winning Properties selected in the CSS Properties panel, expand the Grid section of the CSS Properties panel.

5. Set -ms-grid-columns to 200px 1fr 200px.

6. Set -ms-grid-rows to 150px 1fr 200px.

To add content to the grid

1. From the Assets panel, expand Elements and choose <div>. An empty <div> is added.

2. In the Live DOM panel, double-click the new <div> element and specify the ID content for the <div>, then press Enter.

3. Right-click on content and choose Create Style Rule from Element ID. A new style rule is added to the Style Rules panel and is displayed in the Applied Style Rules section of the CSS Properties panel.

4. In the CSS Properties panel, expand the Background section and click the background-color box.

5. In the Hex value box, type #FF00FF00, and then press Enter.

To position the content in the grid

1. With content selected in the Live DOM panel and either #content or Winning Properties selected in the CSS Properties panel, expand the Grid section of the CSS Properties panel.

2. Set -ms-grid-column to 2.

3. Set -ms-grid-row to 2.