Refer to the spec : background and motivation

• The stats area always appears immediately under the game title.
• The game board appears to the right of the stats and title.
• The top of the game title and the game board should always align.

We have created a two-column, three-row grid, and then placed items onto it using line-based positioning. This makes the positioning outlined in the spec easy. The game board takes up two rows, which means that the title can go into the top row to the left of it, and the stats below.

The next thing we want to achieve is described as:

“The bottom of the game board and bottom of the stats area align when the game has reached its minimum height. In all other cases the game board will stretch to take advantage of all the space available to it.”

The default value of align-self is stretch for items that do not have an intrinsic aspect ratio. This means that our game board area stretches to the height of the stats area, due to it being in the same row. The height of this row is defined by what is in it. If the game board contents is shorter than the stats contents, it will align to the bottom of the stats area, if the game board has more contents it will grow taller. Also, because it is set to 1fr, it will take up all available space if a height is set on the grid. I have set a height in vh units so you can see this happen.

Find out more about the fr unit in this video on Grid by Example – the fr unit.

The stats area itself is set to align-self: start. When the game board is taller, it does not stretch to the same height. The border that I have applied ends underneath the content. You can play around with the values of align-self, setting it to center, end or stretch and seeing how it changes the way this layout appears.

We also see alignment on the main axis, which uses the justify-* properties. The controls area uses justify-content: center to centre itself inside the grid cell, therefore directly underneath the game board area.

The alignment and justification properties are defined in the Box Alignment specification. You can find out more about them with this video, and also in this cheatsheet which compares the properties as they apply to Grid Layout and Flexbox.

Example 2

The second example uses the Named Grid Areas method of creating a grid layout, and demonstrates how the grid can be refined inside media queries with a simplistic example using an orientation media query.

The example uses the same layout for the game, and the same column and row track sizing, when the game is in landscape orientation. The grid is defined differently in portrait orientation. However, outside of the media queries, the areas are named using the grid-area property so they will always be placed into the relevant area as it changes according to orientation.

You can find out more about this method of layout in my video about Grid Template Areas, also see Grid Template Areas on MDN.

These examples are simplistic, and leave out many features of sizing and alignment that you may well need in a production layout. However they demonstrate the range of possibilities in a few short lines of grid code.

A note on reordering and accessibility

The specification has demonstrated the powerful reordering capability of grid layout, however it also warns of the dangers of doing so.

“Note: The reordering capabilities of grid layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. ”

The order of items in this layout are always:

• title
• score
• stats
• board
• controls

No matter how you change the visual order, this logical order remains. When developing a site using grid layout, and shifting content around using this method, you use take care not to completely disconnect the source order from the visual display. Read more about the issues this raises in the following resources.

• MDN: CSS Grid Layout and Accessibility
• The Responsive Order Conflict
• The Keyboard Navigation Disconnect (about flexbox but the issues are essentially the same)

The specification also notes that:

“Grid item placement and reordering must not be used as a substitute for correct source ordering, as that can ruin the accessibility of the document.”

This is a reminder that just because you can use grid layout to put elements in any arbitrary order, you should always prefer to reorder in the source as this will maintain the contention between source and display. If you realise you want some element to display at the top or bottom of your layout, it is tempting to use grid to do that. Instead you should go into the source and make the change in order in addition to making sure the items displays where you want it to visually.

In the next article we will move onto the Overview.