مناطق قالب الشبكة

<div class="page" style="min-height:240px;">
  <header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
  <main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

<div class="layout" style="display:grid;min-height:200px;">
  <div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
  <div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
  <div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>

<div class="dashboard" style="display:grid;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

<div class="page" style="display:grid;min-height:200px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>