JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<div class="main-container">
  <section class="section" style="--gap: var(--space-300);">
    <div class="wrapper">
      <div class="card">Hero (manji razmak ispod)</div>
      <div class="badge is-breakout">Breakout badge</div>
      <div class="stripe is-full">dsds</div>
    </div>
  </section>

  <section class="section" style="--gap: var(--space-800);">
    <div class="wrapper">
      <div class="card">Features (veći razmak ispod)</div>
      <div class="card">Feature B</div>
      <div class="card">Feature C</div>
    </div>
  </section>

  <section class="section"> <!-- koristi default --section-gap -->
    <div class="wrapper is-full">
      <div class="card">Content (default razmak)</div>
    </div>
  </section>
</div>

CSS

/* ========== TOKENS ========== */
:root {
  /* spacing scale (prilagodi po DS) */
  --space-0: 0;
  --space-100: .5rem;
  --space-200: .75rem;
  --space-300: 1rem;
  --space-400: 1.5rem;
  --space-600: 2.25rem;
  --space-800: 3rem;

  /* layout */
  --content-max-width: 70ch;
  --padding-inline: 1rem;     /* bočni padding na uskim ekranima */
  --breakout-size: 2rem;      /* širina breakout staze */

  /* defaulti */
  --section-gap: var(--space-400); /* podrazumevani razmak između sekcija */
  --row-gap: var(--space-200);     /* podrazumevani interni razmak unutar wrapper-a */
}

/* Globalno: štiti od neočekivanog overflow-a spacinga/bordera */
*, *::before, *::after { box-sizing: border-box; }

/* ========== LAYOUT: VERTIKALNI STACK ========== */
.main-container {
  display: flex;
  flex-direction: column;
}

/* KLJUČ: razmak između sekcija određuje SVAKA sekcija preko --gap; fallback na --section-gap */
.main-container > * + * {
  margin-block-start: var(--gap, var(--section-gap));
}

/* Možeš imati i univerzalne stilove za sve sekcije ovde (bez margin-e) */
.main-container > * {
  /* place for shared section styles if needed */
}

/* ========== WRAPPER GRID sa imenovanim linijama ========== */
.section .wrapper{
  display: grid;
  /* dodaj padding na wrapper, ne kroz kolone */
  padding-inline: var(--padding-inline);

  grid-template-columns:
    [full-width-start]   minmax(0, 1fr)
    [breakout-start]     minmax(0, var(--breakout-size))
    [content-start]      min(var(--content-max-width), 100%)
    [content-end]        minmax(0, var(--breakout-size))
    [breakout-end]       minmax(0, 1fr)
    [full-width-end];

  row-gap: var(--row-gap);
}

/* default content kolona */
.section .wrapper > * { grid-column: content; }

/* helper širine */
.is-breakout { grid-column: breakout; }

/* FULL: raširi preko cele mreže i poništi wrapper padding */
.is-full{
  grid-column: full-width;
 ...