Refer to the spec : background and motivation
In the previous article in this series we took a look at the introduction to the grid spec, and in particular why we have grid layout as well as flexbox. This time I am taking a look at the background and motivation section, which gives some examples of the sort of problems Grid aims to solve.
As these examples come with some code, I thought I would also build them as live examples that we can refer to. This part of the spec looks forward to things that will be described in detail later, so I’ll link out to some other examples in order that you can see how each of the different things works.
The first two paragraphs describe issues that, if you have ever built a web site that had more than a single column layout, you are likely to be familiar with. Our older layout methods were not designed for the responsive web of multiple devices sizes and capabilities that we now have to develop for. Grid layout aims, for the first time, to give us a method of dividing up the available area, and being able to redefine it for different screen sizes. The spec then shows us a couple of examples.
1.1.1 Adapting layouts to available space
The first example describes a game layout, and provides some very barebones HTML and CSS to demonstrate how this game is laid out. You can see that on CodePen with a little extra styling to help demonstrate some of the features more clearly.
See the Pen Refer to the spec: background example 1 by rachelandrew (@rachelandrew) on CodePen.
- 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
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.
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.
See the Pen Refer to the spec: background example 2 by rachelandrew (@rachelandrew) on CodePen.
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:
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.