In one of our earlier introduction tutorials to CSS Grid we looked at fluid columns and better gutters. We learned that it isn’t necessary to specify exactly where we want to position our grid items; if we declare our grid’s properties, Grid will slot our items in according to its auto-placement algorithm.

In this tutorial we’ll take a look at how that algorithm goes about its work and how we can influence it.

Setup

If your browser isn’t setup to support Grid you’ll need to sort that out to follow along. Read this:

• 

  CSS Grid Layout: A Quick Start Guide

  How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This updated quick start guide will skip the details...

It Started With a Grid

Here’s a demo grid to kick things off; it’s a container which we’ve declared to be display: grid; and holds eighteen child elements. We’ve stated that it should have five columns, each of equal width, at least the same amount of rows, and a narrow gutter all round of 2px.

1

  grid-template-columns: repeat(5, 1fr);

2

  grid-template-rows: repeat(5, 1fr);

3

  grid-gap: 2px;

So far so good, and you can see that Grid has taken our eighteen items and pushed them in, working from the top left, moving across to the right, then moving down row by row. This behaviour is much like the way floats work.

Note: the left-to-right behaviour would be reversed if we were dealing with a direction: RTL; layout.

Throwing a Spanner in the Works

That’s all nice and neat, but let’s see what happens when our items don’t fit so perfectly. To .item-7 we’ll add some rules to make it bigger by spanning two columns and two rows:

1

.item-7 {

2

  background: #e03f3f;

3

  grid-column: span 2;

4

  grid-row: span 2;

5

}

How does that look now?

Not too bad! .item-7 fills up more space, so .item-8 and .item-9 are positioned further over. .item-10 then looks to see if there’s a vacant space next to .item-9, and when it sees there isn’t it moves down a row and starts again on the far left. The other items continue to tuck in in the same way. 

But wait, what if we also make .item-9 a little overweight?

Now it gets interesting; .item-9 no longer fits into the column at the end so it’s pushed down to the next row. As it can’t fit in anything beyond .item-7 it stays put. .item-10, you might imagine, would tuck itself in underneath .item-6 again, but, if you remember, it searches for a vacant column, then failing that it moves down a row and shunts across to the left again. This is an important concept to grasp.

Say “Hello” to grid-auto-flow

If you look at the previous demo you’ll see that .item-18, upon failing to find space next to .item-17, has moved down a row. We only actually defined five rows, but Grid has assumed we’ll want another row tacking on. This is owing to grid-auto-flow, which belongs to the grid element, and whose default value is row. We can change this value to column if we want, which would totally alter the way our grid looks:

This looks sort of similar, but you’ll notice that our items have slotted in top left, then moved down to fill each row, then moved across to the second column and so on. So now when an item is too big for its boots, the following item searches for the next vacant row space, then failing that shifts over to the next column.

Dense Makes Sense

We can add another keyword to our grid-auto-flow property, and it’s possibly my favourite CSS keyword to date: dense. Its default counterpart is sparse (my second favourite). Let’s do the following:

1

grid-auto-flow: row dense;

Note: we don’t need to include row here, it’s implied, but this highlights how the syntax works.

Now our friend .item-10, upon finding that there’s no space next to .item-9, first checks what’s above before moving to another row. 

Thanks to this change in the placement algorithm our items are now densely packed, which gives us a more efficiently filled grid. This does mean, however, that the visual layout doesn’t necessarily reflect the document source order, which may not always be helpful to the user.

Conclusion

Let’s recap:

1. If we haven’t specifically defined an item’s location, Grid’s auto-placement algorithm will place it in the next available (and large enough) slot.
2. Where there’s no available slot in the current row, it will begin searching the following row, even if that leaves gaps.
3. We can switch this search order by altering grid-auto-flow from row to column.
4. grid-auto-flow accepts a keyword to describe the “packing” approach. By default this value is sparse, but we can alter this to dense which attempts to fill in all available gaps.
   

Useful Resources

• grid-auto-flow on MDN
• The grid-auto-flow property specification