I think I've spotted a mistake in this documentation example - please can you confirm?

[ror-y]

On the MDN page for grid-template, they have this example:

(I can't link the code examples because they have no link attached to them but they are there on the page)

In the code example, they use the following declaration:

  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left]   "nav  main" 1fr  [main-right]
                 [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;

This naming convention suggests these lines are being applied to column tracks. However, the property that is being applied to is grid-template-rows, in which case the naming should include -top and -bottom not -left and -right.

This is what they have done on a different example on the page:

grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;

So, technically there's no error, just extremely misleading grid line naming. Or am I missing something?

[rachelandrew]

I'm not sure why you keep raising MDN issues here? This AMA isn't linked to MDN at all.

If you have a problem with something on MDN it's a wiki, so you can change it.

[ror-y]

It was more about whether I had the right idea of using grid-template correctly.