Missing example on grid layout learn guide page

[tbaiense]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids

What specific section or headline is this issue about?

Flexible grids with the fr unit

What information was incorrect, unhelpful, or incomplete?

I think there's a missing example below the 3th paragraph on section "Flexible grids with the fr unit", where is says

You now have flexible tracks. The fr unit distributes space proportionally. You can specify different positive values for your tracks like so:

What did you expect to see?

A CSS snippet or image with an example of different positive values for each track, as the paragraph says.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn_web_development/core/css_layout/grids
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/css_layout/grids/index.md
• Last commit: 4139ce4
• Document last modified: 2025-02-03T10:24:00.000Z

[Josh-Cena]

@dletorey @bsmth in #37525 made this example code all hidden and there's no EmbedLiveSample. Is the intention to just make a live sample here, or do we also need to unhide the code?

[bsmth]

Thanks, Josh. That's another structural leftover. We should fix by combining the prose like this:

You now have flexible tracks. The fr unit distributes space proportionally. You can specify different positive values for your tracks like so:

code…

Now change your track listing to the following definition, creating one 2fr two 1fr tracks:

You now have flexible tracks. The fr unit distributes space proportionally, so you can specify different positive values for your tracks. Change your track listing to the following definition, creating one 2fr two 1fr tracks:

code…