A column class normally means the size of the whole page. With $scoped-layout on, add .grid-scope to any element and it becomes its own space instead — the grid, ordering, bleed and hide-* inside it measure that element, not the browser window. Each case below has a resize handle (drag the dashed edge) so you can change that space without touching the real window.
Drag the box narrower and wider — the grid should go from 1 up to 4 columns, at the same widths a full-page grid would use, just measured against the box instead of the window. The two tags show why this matters: hide-below-md follows the box; vp-hide-below-md always follows the real window, no matter how narrow you drag the box.
Two columns, each with its own small grid inside. With the toggle off, neither nested grid is its own scope, so they measure all the way up to the page — they stay full width even though their own column is only half that, and dragging the box does nothing to them. Switch the toggle on and each nested grid becomes its own scope, matching its column instead — now dragging the box reflows them.
Click a width below 900px and back above it. The first two blocks should swap places; the highlighted (green) block always stays last, and its edge should reach the true edge of the browser window — not just the edge of the dashed box. A bleed always escapes all the way to the page, whatever scope it's nested inside. (Buttons instead of a drag handle here on purpose: a draggable box needs its overflow set to show the handle, and that would trap the escaping bleed right back inside it.)
Real case this stands in for: a card with its own internal grid, sitting inside a sidebar that's also a scope. The whole dashed box you're dragging is the outer scope (the "sidebar") — the pink label inside it just marks that, it isn't split into columns itself. Below it, narrower (60% as wide), is a second, nested scope (the "card") holding the two green columns. Drag the handle. What should happen: the green columns go side by side only once the narrower green area itself reaches 600px wide — not the dashed box, not the window. Watch the "inner scope width" number below: it should read 600px or more exactly when they do. What would mean it's broken: the columns splitting at some other width than that number shows.
…
Drag the box across 900px. The table should stack to a card layout based on the box's width, not the window's — you should be able to make it stack in a full-width browser just by narrowing the box, and un-stack it again by widening the box, with no window resize at all.
| Species | Stinger | Habitat |
|---|---|---|
| Cotylorhiza tuberculata | Mild | Mediterranean Sea |
| Pelagia noctiluca | Severe | Mediterranean Sea |
| Rhopilema nomadica | Severe | Indo-Pacific Ocean |
Drag the box across 600px. Above that, the image should float with text wrapping around it; below it, the image should just sit on its own line — driven by the box, not the window.
Text should wrap around the floated image above the box's own 600px point, and stack below it under that — watch the box width, not the browser window, as you drag.
Drag the box across 600px. Above that, the two fields should sit side by side, sharing the row equally; below it, they should stack.
Turning something into a scope can shrink it to nothing if it has no width of its own to fall back on. Three boxes below: a plain control, a scope with an explicit width (fine), and a scope with no width, sized only by its own content. If the third box visibly collapses narrower than its text needs, that's the gotcha the docs warn about.
Same idea, as an inline element instead of a flex item:
inline-block grid-scope, no explicit width