Turning Regions into Layout CSS

layout and positioning

Part of: Screenshot Describer

Tags without layout are a pile of elements stacked top to bottom. A screenshot has structure: a header up top, a sidebar on the left, a footer at the bottom. The starter code should hint at that structure instead of throwing it away. Add a region to the schema Extend lesson 3's component schema with one more field: which part of the page the element lives in. A small fixed set of regions keeps this predictable: header, sidebar, main, footer. You'd add region to the system prompt's schema right alongside type and text from lesson 3. CSS Grid speaks the same language CSS Grid has a feature built for exactly this: grid-area. Name a region on the container's template, then assign each element to that named area: component.get("region") or "main" does two jobs at once. It handles a missing region key and an empty-string region, falling back to main either way. Most of a screenshot is main content, so that's the safest default when the model isn't sure. Pairing it with the HTML Give each rendered tag a matching id, so the CSS rule and the markup line up: Now the starter bundle has matching parts: an HTML element, an id, and a CSS rule that places it in the right region of a grid. Why not

Challenge: Assign Grid Areas