I agree, and in general I think these could be made clearer by turning each into an SVG (rather than these mocked up code examples). More like the examples in the grid spec. Unless there is some issue with that I'll create SVG images that clearly show these examples.

No problem at all, we ended up with these drawings because they are simpler to create, not because anyone prefers that sorts of things.

I've added SVG versions of the examples in Section 2. I think these are better, and using the same text throughout should help to demonstrate the different examples in a more obvious way.

Unless anyone has any feedback or suggestions on how to improve these I'll continue and do the same with the more fiddly ones in the column-span section.

These look way better than what they replaced. Thanks a ton.

I have now replaced all of the examples. I've tried to remain faithful to the intent of the originals. I suggest that if any of the images or indeed the examples themselves still need work individual issues are raised. I have a big Sketch file of all of these so can make any changes that we think would make things clearer, therefore I'll close this issue.

Can you put the Sketch file in the repository, just in case we need to make edits to these 7 years from now and you're not longer editing the spec by then? No need to link to them from anything, just put them in the same directory.

good call, I'll tidy it up a bit and do so.