Responsive layout practice
A different handoff page needs the layout patterns from this unit. Its sidebar, cards, captions, and spacing use fresh text, but the relationships are familiar. Decide whether each task needs Grid, a containing block, a fluid maximum width, or a token inherited from a local theme. Check the desktop arrangement before switching to the phone preview. The phone layout should fit without hiding information or changing the reading order. An overlay belongs to its own figure, and a badge belongs to its card. Keep those contexts local so a later page change doesn't pull the element somewhere else.
<div class="grid"><article>Alder</article><article>Mica</article><article>Juniper</article></div>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px} button,input,select{font:inherit} button,a,input,select,summary{outline-offset:4px} img{max-width:100%} [hidden]{display:none!important}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:360px;max-width:100%}.grid article{min-width:0;overflow-wrap:anywhere}
for (const el of document.querySelectorAll('[data-text]')) el.textContent = String(fixture[el.dataset.text] ?? '');
for (const el of document.querySelectorAll('[data-href]')) el.setAttribute('href', fixture[el.dataset.href]);
for (const el of document.querySelectorAll('[data-alt]')) el.setAttribute('alt', fixture[el.dataset.alt]);
for (const el of document.querySelectorAll('[data-value]')) el.value = String(fixture[el.dataset.value] ?? '');
for (const el of document.querySelectorAll('[data-items]')) for (const text of fixture.items) { const li = document.createElement('li'); li.textContent = text; el.append(li); }
document.documentElement.style.setProperty('--fixture-gap', fixture.gap + 'px');
Read the markup and styles together, then trace the resulting control or layout.