Using offsets with auto-positioning

[sgomes]

Hey Rachel!

Thanks for hosting this AMA! Going through other folks' issues has helped me a lot in grokking CSS Grid :)

I'm currently implementing a flexbox-based 12-column layout CSS module, with a progressive enhancement to CSS Grid where available. Going through this exercise really illustrated how much cleaner CSS Grid is; I can simply define gutter and margin sizes and set width: auto on grid items, rather than having complex calc()s everywhere.

However, I've run into something I've found no way to implement: I'd like to offer an 'offset' feature which moves a grid item N columns to the right, while keeping that space empty. You can think of it as a margin on the left side of the grid item:

2-cell spanning boxes. No offset:
+------+ +------+ +------+
|      | |      | |      |
+------+ +------+ +------+

2-cell spanning boxes. Offset of 1 on the centre cell.
+------+     +------+ +------+
|      |     |      | |      |
+------+     +------+ +------+

In flexbox, this is easy to implement; you simply add the length of the offset to the left margin of the grid item (you can easily generate CSS classes with pre-calculated values or use custom properties in your calc()s).

In CSS Grid, however, I haven't found any way of doing this while using auto-positioning. I tried several things:

• Setting a left margin on the grid item. This makes the grid item smaller, rather than push it to the right.
• Setting an explicit width on the grid item and adding a left margin to it. Moves the grid item underneath the next one.
• Using a clever combination of grid-column-start and grid-column-end. No luck; there seems to be no way of specifying a column relative to where auto-positioning would place you. Any start/end positions are absolute.
• Using position: relative with a left offset. As expected, it positions the element correctly, but doesn't push the next one forward.
• Using ::before in some way. Doesn't work, because the pseudo-element would need to be a sibling of the grid item, not a child.

Is there any way of implementing this offset idea in CSS Grid without inserting a spacer grid item into the DOM? Thanks!

[sgomes]

Also, let me know if a Codepen would help; I can come up with a simplified illustration of the issue that's easier to play around with.

[rachelandrew]

Yes a CodePen would help.

[rachelandrew]

Closing as no further info provided - feel free to reopen with info.