Content bug: Most CSS grid introductory _CSS Demos_ are missing relevant contextual information

[Abdull]

What page(s) did you find the problem on?

• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid
• and others from the CSS grid properties pages.

Specific page section or heading?

Examples in the introductory CSS Demo, section.css-editor-container.

What is the problem?

While each demo is nice to learn the specific CSS property by the given three or four examples, the demos are missing contextual information:

• What are the grid container's (#example-element) CSS grid properties? The rules (e.g. grid-template-rows: repeat(3,minmax(40px,auto)) in one example, grid-auto-rows: 40px in another; grid-template-columns: 1fr 1.5fr 1fr in one, grid-template-columns: 1fr 1fr 1fr in another) are not shown, yet relevant for the property under experimentation.
• What are each grid item's (One, Two, Three...) CSS grid properties? One example's One item has grid-column: 1/3, Two has grid-column: 2; another's example Two item has grid-column: auto/span 3; grid-row: auto/span 2. Again, to grasp the behavior of the selectable sample values, this contextual information is important.
• And because each page's CSS Demo setup is slightly different from the other pages, one page's demo setup cannot be "cognitively reused! for the other pages' demos, as several properties have changed.
• It's sometimes not clear which element is under test, e.g. on https://developer.mozilla.org/en-US/docs/Web/CSS/grid everything changes visually per sample value, which makes it hard to understand it's the grid container's grid property which is being changed.

What did you expect to see?

• The same demo setup on each CSS grid property page, which the property on discussion being the interactive property.
• Source code for the whole demo HTML and CSS setup - even more awesome if the whole HTML and CSS can be live-edited ("let's add one more grid item; let's fiddle with the grid-template-rows property, ...)

Did you test this? If so, how?

"Yes".

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

[wbamberg]

FWIW while I think there is some merit in this issue I don't think it's at all solvable in the context of interactive examples, which don't show all the details of the example, and whose format isn't really intended to do that.

It's a design choice of the interactive examples not to show the complete context, so as to provide a simpler, shorter example suitable for the top of the page. It wouldn't be appropriate to show screenfuls of code at the top of the page.

If you want examples showing the complete context you really need to look at examples further down the page: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow#examples.

It's true that this works less well for properties whose effect is very context-dependent. So if that's seen as a big enough problem for, say, the grid properties, then the fix is to remove them.

FWIW I would be against that and think the issues here are not so great. For example in If you want complete examples showing the complete context you really need to look at examples further down the page: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow it seems pretty obvious to me what the effect of this property is, even without knowing all the other grid values.

[Abdull]

FWIW while I think there is some merit in this issue I don't think it's at all solvable in the context of interactive examples, which don't show all the details of the example, and whose format isn't really intended to do that.

It's a design choice of the interactive examples not to show the complete context, so as to provide a simpler, shorter example suitable for the top of the page. It wouldn't be appropriate to show screenfuls of code at the top of the page.

What about introducing a "Show complete context" widget (accordion, button)? This way, the top-of-the-page examples stay short by default, yet still allow to give further details on demand.