Windows apps
Collapse the table of content
Expand the table of content

Create the game grid (HTML)

You can create a layout that can adapt easily to different screen resolutions and give precise control over which parts resize and which don’t by using the CSS grid.

Like HTML table layouts, CSS grids are based on rows and columns. Unlike the HTML table element, the rows and columns for grid layout are defined in CSS, not in HTML, keeping your semantic markup free from markup devoted to layout. In addition, CSS grid layout offers precise control over grid behavior during resize events.

Rows and columns can be defined to have a fixed size, in other words, a size that doesn't change when the grid is resized. Alternatively, rows or columns can be defined to have a fractional size, causing them to resize relative to a size change of the grid.

For example, if one row is defined 1fr and another 2fr, the grid will size the two rows so that the second one is twice as big as the first one, no matter what the size of the grid.

You can also define rows or columns to size to fit their content by using Auto.

Grid layout can be applied to any block element by using the display property -ms-grid.For this grid, you want all of the rows and columns to be fixed size, except for the content area.

To create the grid

  1. In the Live DOM panel, select gameBody.

  2. In the Applied Rules section of the CSS Properties panel, make sure that either Winning Properties or #gameBody is selected.

  3. In the CSS Properties panel, expand the Layout category.

  4. In the display drop-down menu, click –ms-grid.

    As soon as this property is set, all of the grid content stacks up in the top left corner. This happens because, by default, the new grid has only one row and one column.

    Grid just added

To add columns and rows to the grid

  1. Select gameBody in the Live DOM panel, or select either Winning Properties or #gameBody 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.

    Orange grid adorner
  3. Click to add the grid column adorner.

  4. Repeat to add four total grid column adorners (which define five columns).

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

    Orange row adorner
  6. Click to add the grid row adorner.

  7. Repeat to add four total grid row adorners (which define five rows).

To set a column to a fixed size

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

    Setting a column to fixed size

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

  2. Set all of the columns and rows to fixed (px) except the column to the left of the last column and the row above the last row.

    Grid settings
  3. To set precise values for rows and columns, in the CSS Properties panel, expand the Grid section. Add the following values:

    NoteNote

    You can copy and paste the values directly, or you can type the values into the text box as they appear, without commas and with spaces between each of the values.

    • -ms-grid-columns   40px 185px 20px 1fr 40px

    • -ms-grid-rows   100px 30px 20px 1fr 40px

    Press Enter.

The next step: Align content to the grid.

Show:
© 2018 Microsoft