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.

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

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.

33 Comments

Rachel🦄Nabors July 19, 2017 Reply

Is it really safe to start using CSS Grid Layout? According to @rachelandrew, yes, of course. buff.ly/2tvoTX3

🐐✊🏽🌞💾🎙🖖🏽🐔 July 19, 2017 Reply

@SaraSoueidan @gregwhitworth @jensimmons @Real_CSS_Tricks I made some notes on this here last year rachelandrew.co.uk/archives/2016/…

Dennis Lembrée July 19, 2017 Reply

Great info! “Is it really safe to start using CSS Grid Layout?” bit.ly/2vC1UuN by @rachelandrew #css #webdesign #webdev

Melanie Sumner July 20, 2017 Reply

My #codecation is going to be ember-styleguide but doing it with CSS Grid. August 18-23. (@mkerndt @rachelandrew @jensimmons) #Ember #CSS

Zeldman July 20, 2017 Reply

♛ Rachel Andrew continues her brilliant series explaining the screen design problems CSS Grid was created to solve.

rachelandrew.co.uk/archives/2017/…

Lara Hogan July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Marianna Foos July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Isabella R. Ghement July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Lauri Apple 🍎🖥✈️ July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

chad nelson July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Anjana @EuroClojure July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Birgit Pauli-Haack July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Scott McWilliams July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Steven Hoober July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

David Lewis July 20, 2017 Reply

This has been a great series of articles. rachelandrew.co.uk/archives/2017/…

Clever Marks July 20, 2017 Reply

“Refer to the spec : background and motivation”, Rachel Andrews rachelandrew.co.uk/archives/2017/… #css #grid #rwd #flexbox via @borisschapira

David Golden July 20, 2017 Reply

.@YAPCNA, pay attention

Miroslav Bajtoš July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Dave July 20, 2017 Reply

@SaraSoueidan @bluesmoon @lara_hogan I did a survey last year. Turns out travel & expenses are a huge diversity and safety issue https://t.c

Leave a Reply