This tutorial provides a walkthrough for aligning content to the 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
Blend Tutorial Part 5: Align Content to The Grid—Memory Game [This post.]
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

Align content to the grid

Now that you’ve set up a precision grid, you can now arrange content within the grid.

You want to store the grid positioning information in the CSS rule with the #gameTitle selector. In order to do this, select either winning rule or the #gameTitle rule in Applied Rules for the title element.

Note: The winning rule is a virtual rule that displays the CSS rules in effect for the selected element.

If the #gameTitle rule is selected, Microsoft Expression Blend for Windows Developer Preview will write new properties to it.

If the winning rule is selected, the write target for the new property is determined as follows:

• A property that is already set is written to the same rule where it was originally defined.
• A new property is written to the rule with the associated ID selector. In the case of the gameTitle element, this would be #gameTitle.
• If there is no ID selector defined, Expression Blend for Windows Developer Preview writes the style to the inline rule if the inline rule is accessible for writing.

Note: If the element is dynamically generated by JavaScript, Expression Blend cannot store properties for the inline style.

In the case of an element with an ID rule, it makes no difference if winning is selected or the ID rule is selected for a newly defined property value. New property values will always be written to the ID rule.

Position the title in the grid

You can quickly modify the CSS properties, including positioning, by using the CSS Properties panel.

To make it easier to refine the positioning of different element, you can hide the elements, and then show the particular elements that you are working with to better view the changes. In the Live DOM panel, hide the following elements by clicking Hide to the right of each element:

• gameTitle
• gameTagline
• settings
• stats
• gameBoard

You can position the title, including changing the column and the alignment, by modifiying the attributes in the CSS Properties panel.

To change the title column

1. In the Live DOM panel, click gameTitle and make the gameTitle visible by clicking Show to the right of the gameTitle element.
2. In the Applied Rules section of the CSS Properties panel, select either winning or #gameTitle.
3. In the CSS Properties panel, expand the Grid category.
4. Set the -ms-grid-column property to 4 by doing one of the following:

• Type 4 into the –ms-grid-column box.
• Click inside the –ms-grid-column box, and then use the Up and Down arrows to select column 4.

Note: CSS columns and rows are counted starting at 1.

To modify the row alignment

1. In the Grid category, in the -ms-grid-row-align drop-down box, select end.
2. In the Layout category, set margin-bottom to -8px.
   

Position the tagline

Now that the title is positioned, you can align the tagline with the title.

To position the tagline

1. In the Live DOM panel, click gameTagline, and make the gameTagline visible by clicking Show to the right of the gameTagline element.
2. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID: gameTagline. A new style rule is created.
3. With #gameTagline selected in the Applied Rules section of the CSS Properties panel, expand the Grid category and do the following:

• Set -ms-grid-column to 4.
• Set -ms-grid-row to 2.
• Set -ms-grid-row-align to end.

1. In the Layout category, set margin-top and margin-bottom to 0px.
2. In the Text category, set font-size to 18px. Press Enter.
   

Position the buttons and stats elements

The next step is to position the settings and stats elements of the game. In addition to setting the position of the settings and stats elements, you’ll create a class for the buttons so that you can more easily style them, and modify the attributes of some of the elements to better suit the design.

To position the settings element

1. In the Live DOM panel, click settings and make the settings element visible by clicking Show to the right of the settings element.
2. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID: settings. A new style rule is created.
3. With #settings selected in the Applied Rules section of the CSS Properties panel, expand the Grid category.
4. Set -ms-grid-column to 2 and set -ms-grid-row to 4. Press Enter.

Style the game buttons

You want to apply the same style to each of the three buttons. Instead of applying a style to each button separately, you can create a class selector, and then apply the same style to all three of the buttons using the class selector.

To create the class selector

1. On the Edit menu, click Select none (or press Ctrl + Shift + A) to clear any previous selections. Press and hold the Ctrl key, and then, on the artboard, select the Start the Game, Stop the Game, and Select Card Style buttons.
   

1. In the Attributes panel, locate class, and then type gameButtons in the class text box.

Tip: If the Attributes panel isn’t visible, on the Window menu, click Attributes.

To style the gameButtons class

1. In the Live DOM panel, under settings, select one of the buttons (startGame, stopGame, or selectCards).
2. In the CSS Properties panel, click the arrow next to Applied Rules, select Create style rule from selected element class, and then select gameButtons. A new style rule is created.
3. Select .gameButtons in the Styles panel.

Notice that the buttons of the .gameButtons class have a green adorner applied. This lets you know which elements will be affected by any style changes to the class. This is especially helpful when you have complex selectors in place.

1. With .gameButtons selected in the CSS Properties panel, set the following properties in the Sizing category:

• Set width to 100%.
• Set height to 40px.

1. In the Layout category, set margin-bottom to 10px.

To align the radio buttons

1. In the Live DOM panel, select gameSize.
2. In the CSS Properties panel, click the arrow next to Applied Rules and select Create style rule from selected element ID: gameSize. A new style rule is created.
3. With #gameSize selected in the Applied Rules section of the CSS Properties panel, expand the Layout category. Set margin-top to -12px and margin-bottom to 10px and press Enter.

Extend the grid

Now that the game buttons are aligned to the grid, you’ll add another row below the Select Card Style button to help with the remaining layout tasks.

To add a row to the grid

• In the Live DOM panel, click gameBody. Click the grid adorner immediately below the Select Card Style button to insert another row.

Modifying the timer and stats elements

Now you are ready to align and style the timer and stats elements.

To align the stats

1. In the Live DOM panel, select stats. Make the stats element visible by clicking Show to the right of the stats element.
2. In the CSS Properties panel, click the arrow next to Applied Rules and select Create style rule from selected element ID: stats. A new style rule is created.
3. With #stats selected in the Applied Rules section of the CSS Properties panel, expand the Grid category. Set –ms-grid-column to 2 and –ms-grid-row to 5.

To modify the value display

1. In the Live DOM panel, under time, select timeDisplay.
2. In the CSS Properties panel, click the arrow next to Applied Rules, point to Create style rule from selected element class, and then click values. A new style rule is created.
3. With .values selected in the Applied Rules section of the CSS Properties panel, in the Text category, set the font-size property to 40px.
   

Position the game board

You’re now ready to position the game board.

To align the game board

1. In the LiveDOM panel, select gameBoard. Make the gameBoard element visible by clicking Show to the right of the gameBoard element.
2. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID: gameBoard. A new style rule is created.
3. With #gameBoard selected in the Applied Rules section of the CSS Properties panel, expand the Grid category and do the following:

• Set -ms-grid-column to 4.
• Set -ms-grid-row to 4.
• Set -ms-grid-row-span to 2. Press Enter.
  

The next step: Blend Tutorial Part 6: Style the Game Board — Memory Game.