Grid Layout automatic placement and packing modes

In February I read with interest a blog post from Manuel Rego Casasnovas on the implementation of the CSS Grid Layout automatic placement feature. We have been able to use auto-placement for some time in the Blink implementation, and you can see examples on my Grid by Example site. The features shipped by Igalia in February implement the packing modes – dense and sparse.

As I’m preparing for my presentations on CSS Grid Layout at Fluent and An Event Apart in the next few weeks, I built myself a few examples to test this out. I thought I’d share one of those here.

I’ve written on this blog and also created several examples on Grid by Example, about how CSS Grid Layout enables the positioning of page elements on a Grid. You can also however use Grid Layout to automatically display items on a Grid, without giving them positioning information. You can combine this automatic positioning with positioned elements – in the case of wanting to position some things and not others.

An example

My markup is an unordered list, the first item in the list is a chunk of text. Everything else is an image. I have added a class of wide to a couple of the list items.

<ul class="wrapper">
  <li class="text"><p>…</p></li>
  <li><img src="../images/balloon1.jpg" alt="hot air balloon" />
  <p>Balloons 1</p></li>
  <li><img src="../images/balloon2.jpg" alt="hot air balloon" />
  <p>Balloons 2</p></li>
  <li><img src="../images/balloon3.jpg" alt="hot air balloon" />
  <p>Balloons 3</p></li>
  <li class="wide"><img src="../images/balloon4.jpg" alt="hot air balloon" />
  <p>Balloons 4</p></li>
  <li><img src="../images/balloon5.jpg" alt="hot air balloon" />
  <p>Balloons 5</p></li>
  <li><img src="../images/balloon6.jpg" alt="hot air balloon" />
  <p>Balloons 6</p></li>
  <li class="wide"><img src="../images/balloon7.jpg" alt="hot air balloon" />
  <p>Balloons 7</p></li>
  <li><img src="../images/balloon8.jpg" alt="hot air balloon" />
  <p>Balloons 8</p></li>
</ul> 

In the CSS, I create my grid on the ul with a class of wrapper.

.wrapper {
  display: grid;
  max-width: 960px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-flow: dense;
}

I then position my .text list item so that it sits between column lines 2 and 4, and rows lines 1 and 3.

.text {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

The class of wide I set to grid-column-start auto, and grid-column-end to span 2.

.wide {
  grid-column: auto / span 2;
}

Any other CSS is just there to format the boxes, I’ve added a border in order that you can easily see the grid items taking full height of the row. The result looks like this.

What has happened here is that my list item with the class of text has been positioned on the grid. All of the other items have been positioned according to the dense packing mode that I requested by setting grid-auto-flow to dense. This means that rather than respecting the document source order when laying out the items, any spare gap in the grid will be back-filled if an item is encountered that fits the gap.

In this case the image labelled ‘Balloons 5’ comes after the images ‘Balloons 4’ in the source. ‘Balloons 4’ however is set to span two columns and so is too wide for the gap on the second row and drops to the third row. Then, when ‘Balloons 5’ is encountered, a space for it is available on the second row so it is put there, and then the layout continues back after ‘Balloons 4’.

If we change grid-auto-flow to sparse you can see how now the items are laid out in order and a gap is left.

You can view the code for this example here, I’ve made that example responsive so the grid redefines for a couple of breakpoints. It’s also worth reading Manuel’s blog post for an in-depth look at how the algorithm works.