The Quirks of CSS Grid and Absolute Positioning
tuts+ -

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

Loading...

Related Articles