This tutorial provides a walkthrough for creating a flexible CSS grid for your app. Apps based on a flexible grid can adapt to run on a variety of devices with different display sizes, aspect ratios, and screen resolutions.

About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game [This post.]
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions—Memory Game
Blend Tutorial Part 9: Build and Run Your App—Memory Game

Create a flexible layout

This game is designed to run on different devices with different resolutions and different aspect ratios. For this reason, it needs to resize properly. The content area must be resized on larger screens but the frames that hold the logo, title, and UI should keep a fixed size. This capability requires the use of CSS grid layout.

There is another factor to consider when resizing UI. Because you want the game to respond to touch, you want the UI (for example, the buttons) to remain large enough for fingers. Microsoft Windows Developer Preview automatically adds scaling factors for high-pixel-density displays and Microsoft Expression Blend 5 for Windows Developer Preview provides the ability to preview how your design looks and behaves when the app is resized.

You’ll start with a basic layout for the game, one that follows a common layout pattern for Metro style apps: A basic C-shaped border around the content in landscape mode.

	Content
	Border
	Header
	Footer
	Logo

Create the CSS grid

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.

The grid has many more options that make layout within very powerful and flexible. Grid layout can be applied to any block element by using the display property -ms-grid.

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 or #gameBody is selected.
3. In the CSS Properties panel, expand Layout.
4. In the display drop-down menu, select –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.

To add columns and rows to the grid

1. Select gameBody in the Live DOM panel, or select either winning 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.
   
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.
   
6. Click to add the grid row adorner.
7. Repeat to add four total grid row adorners (which define five rows).

Set a column to a fixed size

You want all of the rows and columns to be fixed size, except for the content area.

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).
   

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

1. 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.
   

To set precise values for rows and columns:

1. In the CSS Properties panel, expand the Grid section. Add the following values:

Tip: 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 1081fr 40px
• -ms-grid-rows 100px 30px 20px 578fr 40px

The next step: Blend Tutorial Part 5: Align Content to the Grid—Memory Game.