Layouts grid container with CSS grid classes

by der_robert

HTML

<section class="layout">
<div class="header">
<button class="burger">☰</button>
<div class="resourceBar">
<div class="resource-chip" data-type="wood">
<div class="resource-chip__icon"></div>
<div>
<div class="resource-chip__name">Holz</div>
<div class="resource-chip__value">3 240</div>
</div>
</div>
<div class="resource-chip" data-type="stone">
<div class="resource-chip__icon"></div>
<div>
<div class="resource-chip__name">Stein</div>
<div class="resource-chip__value">1 870</div>
</div>
</div>
</div>
<div></div>
</div>
<div class="leftSide">
<nav class="nav">
<div class="nav__groupTitle">Insel</div>
<a class="nav__link nav__link--active" href="#"><span class="nav__icon"></span>Gebäude</a>
<a class="nav__link" href="#"><span class="nav__icon"></span>Produktion</a>
<a class="nav__link" href="#"><span class="nav__icon"></span>Schiffe</a>
</nav>
</div>
<div class="body">
<div class="building-grid">
<article class="building-card">
<div class="building-card__art">Werft</div>
<div class="building-card__body">
<div class="building-card__title">Werft</div>
<div class="building-card__meta">Stufe 3 · Küste erforderlich</div>
<div class="progress"><div class="progress__bar" style="width:55%"></div></div>
<div class="building-card__actions">
<button class="btn btn--primary">Ausbauen</button>
<button class="btn btn--ghost">Info</button>
</div>
</div>
</article>
</div>
</div>
<div class="rightSide">
<div class="panel">
<div class="panel__title">Verteidigung</div>
<ul class="status-list">
<li class="status-item"><span>Mauern</span><span class="badge badge--success">Stufe 4</span></li>
<li class="status-item"><span>Wachtürme</span><span class="badge">2 aktiv</span></li>
</ul>
</div>
</div>
<div class="footer">© Inselspiel</div>
</section>

SCSS

/* =============================================================
   Drop‑in CSS — Rustic Nautical Style
   Purpose: works WITHOUT SCSS build; targets your exact HTML:
   <section class="layout">
     <div class="header"></div>
     <div class="leftSide"></div>
     <div class="body"></div>
     <div class="rightSide"></div>
     <div class="footer"></div>
   </section>
   Optional hooks (if present): .nav a, .resourceBar, .resource-chip, .building-grid, .building-card
   ============================================================= */

/* --- Base tokens (hard‑coded for plain CSS) --- */
:root{
  --bg:#f5f1e6;          /* parchment */
  --surface:#fffdf7;     /* panels */
  --border:#b8aa84;      /* old map edges */
  --text:#2b2a27;        /* main text */
  --text-dim:#5d5a4f;    /* secondary */
  --sea:#305c7e;         /* deep sea */
  --wood:#7c5334;        /* wood */
  --stone:#6e6b65;       /* stone */
  --grass:#3a6b35;       /* nature */
  --gold:#c9a227;        /* gold */
  --danger:#8b2e2e;      /* danger */
  --radius:2px;          /* sharp corners */
  --shadow:0 1px 1px rgba(0,0,0,.25);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Verdana, Tahoma, sans-serif;
  color:var(--text);
  /* parchment look without external images */
  background:
    radial-gradient(120% 100% at 15% 10%, rgba(0,0,0,.03) 0 18%, transparent 20%),
    radial-gradient(140% 120% at 85% 20%, rgba(0,0,0,.025) 0 12%, transparent 14%),
    linear-gradient(0deg, #f7f3e6, #efe6cf);
}

/* --- Grid layout that matches your structure --- */
.layout{
  display:grid;
  grid-template-areas:
    "leftSide header rightSide"
    "leftSide body   rightSide"
    "footer   footer footer";
  grid-template-columns:240px 1fr 280px;
  grid-auto-rows:auto 1fr auto;
  gap:10px;
  padding:10px;
}
.header,.leftSide,.body,.rightSide,.footer{
  background:var(--surface);
  border:2px solid...