The thing is I don’t understand how the solution you mentioned in “The second thing I hate about grid” would help?

I have a codepen here where I would like to decrease the vertical gap between the h1 and the h2 without effecting the gaps for the rest of the grid:

http://codepen.io/IOIIOOIO/pen/dOXENB

Then there’s also the issue of columns getting autofilled even when you don’t want them to. Like here where I want the subheader to only take up columns 2-5… but then it auto fill column 6 on the same row:

Rachel, I love that people as visible as you are bringing this up. I love that the spec also points it out. We just need to keep working on making that visible since so many developers only read tutorials like this and not the spec. We need to make sure best practices are high and present.

As usual, the spec covers this. It’s mainly for visual order as opposed to read order.

So this would be considered an unordered list, I guess.

But anyway, it’s far more annoying than most I’ve seen and shouldn’t even be a thing.

But it looks good

Hi Nat

indeed and the specification warns against using order to change the logical order. I’ve been stressing this point in my presentations about grid over the last 3 years or so, and I’d love other people who write about grid to also be sure to keep this issue in mind.

The same issue is also true in Flexbox, although with grid being two dimensional there is more scope for creating a mess. There are also people more qualified than me looking into this issue, have a look at http://tink.uk/flexbox-the-keyboard-navigation-disconnect/ for example.

Well, of course I made a confusing typo in the demo. Silly me. Here’s the updated one.

(The reason for this is that negative indexes as a start value can create implicit tracks, which would create an infinite loop of further implicitly created tracks as the item is placed if -1 always referred to the last line.)

Demo

flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;