Web Development: The Quirks of CSS Grid and Absolute Positioning

Tuesday, July 3, 2018

The Quirks of CSS Grid and Absolute Positioning

It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, so let’s take a quick look to make sure you avoid the pitfalls.

Simple Relative Positioning

Let’s begin with a simple grid, with nine items, laid out in three columns. Each column is 1fr wide, except the third column which (thanks to minmax()) will shrink no smaller than 160px:

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

By adding a couple of rules to one of the items, we can position it relatively:

.item-2 {
  position: relative;
  right: 100px;
  top: 30px;
}

So just like we might expect, we declare that item-2 is to be positioned relatively, then define some offset properties (though don’t try using the fr unit on these, it won’t work).

You’ll notice, if you resize the window, that the grid item continues to behave (resize) exactly as it was before we repositioned it, and it’s still, selfishly, reserving its place in the grid in case it feels like coming back.

Slightly More Complex Absolute Positioning

So what happens when we absolutely position that item? Firstly, it will position itself against its closest ancestor which has a declared position value. If you don’t set position: relative; (for example) on the grid container, the grid item will fly out of the grid’s boundaries in search of something else to hold onto, such as the html element.

You’ll see in the demo above that the item is now absolutely positioned 100px from the left and 30px from the top of the grid container. It has effectively been removed from the document flow, as is normal with absolutely positioned elements. Its slot in the grid has been filled by item-3 and the other items have placed themselves to fill up the remaining gaps.

Note: if our grid container were to having padding, the positioning would be in relation to those outer padding boundaries.

You’ll also see that it no longer has the dimensions it was using when it was part of the grid. It has shrunk to the size of its contents. The grid doesn’t influence the sizing of the element, and the element doesn’t influence the sizing of the grid in any way.

Absolute Position Within the Grid

It might take some getting used to, but in addition to the normal offsets you can also position a grid item using the grid-placement properties. For example, let’s place our item-2 absolutely on grid-area: 3 / 2; (in other words, starting on the third row line down, and the second column line across).

It looks odd, but you can see that the item, still unaffected by the sizing of the grid and still outside the flow, has positioned itself rudely on top of item-9. It’s as though it has a grid all of its own, on top of the original.

Note: z-index will allow you to change the stacking order of the items, if you want.

Moving on, if we then add an offset into the mix (top: 50px; for example) our item will apply that offset, while remaining true to its own imaginary grid placement:

A Note on the Implicit Grid

In our previous tutorial we talked about how Grid will create implicit tracks if they’re needed; tracks beyond those we explicitly define. We can position items on those implicit grid tracks if they exist, but Grid won’t create those tracks for elements outside of the flow.

In the demo below, we’ve positioned item-2 on grid-area: 2 / 4; but this is only possible because item-6, which is still in the flow, has already prompted Grid to create those extra tracks for us.

Conclusion

Why would you need positioning with Grid? Initially it might seem like overkill. But when you consider broken grid layouts and moving beyond the straightforward “across and down” web pages we’ve become used to, I think you’ll find positioning quite useful.