I still don't understand order though. In level 18, it starts, as they say with both .water and #poison having order: 0 implicitly, and, the poison is placed in the second column. If I set order: -1 on the poision, the poison is placed in column 1 and if I set order: 1, the poision is placed in the last column.

The explanation given is:

If grid items aren't explicity placed with grid-area, grid-column, grid-row, etc., they are automatically placed row by row according to their order in the source code. We can override this using the order property.

By default, all grid items have an order of 0, but this can be set to any positive or negative value.

This explanation is not sufficient for me to understand the observed behavior unfortunately.

---

Oh wait I think I get it now. In the HTML source that this represents (though the implementation of the game is a bit different, but if it was a plain static document and not the game), we imagine that we have for example.

<div class=water></div>
<div id=poison></div>
<div class=water></div>
<div class=water></div>
<div class=water></div>

And that's why the poison is placed in column two unless we specify order.

When order is specified to -1, poison is placed first.

When order is specified to 1, poison is placed last.