Grid linije: leva-ivica / tekst-start / tekst-end / desna-ivica

by bergb

HTML

<div class="wrapper">

    <div class="full demo">
      <strong>FULL (leva-ivica → desna-ivica)</strong><br>
      Ovaj blok ide IVICA-DO-IVICE cele stranice.<br>
      <span class="note">grid-column: <code>leva-ivica / desna-ivica</code> (alias „full” u drugim primerima)</span>
    </div>

    <div class="left demo">
      <strong>Levi prostor (1fr)</strong><br>
      Ovo je zona između <code>leva-ivica</code> i <code>tekst-start</code>.
    </div>

    <div class="content demo">
      <strong>CONTENT (min(70ch, 100%))</strong><br>
      Centralni „tekst kanal” ograničen na <code>--content-width</code>.<br>
      <span class="note">grid-column: <code>tekst</code> je skraćenica za <code>tekst-start / tekst-end</code></span>
    </div>

    <div class="right demo">
      <strong>Desni prostor (1fr)</strong><br>
      Ovo je zona između <code>tekst-end</code> i <code>desna-ivica</code>.
    </div>

    <div class="content demo">
      <strong>Još CONTENT-a</strong><br>
      Još jedan blok u centralnoj koloni — vidiš kako se slaže u sledeći red.
    </div>

    <div class="full demo">
      <strong>Još jedan FULL</strong><br>
      Ponovo se proteže preko svih kolona.
    </div>

  </div>

CSS

:root{
    /* promeni pa gledaj kako se menja layout */
    --content-width: 70ch;   /* centralni tekst kanal */
    --gap: 12px;
  }

  body{margin:0;font-family:system-ui, sans-serif;line-height:1.5;background:#f7f7f7}

  .wrapper{
    --left: 1fr;
    --right: 1fr;

    display:grid;
    grid-template-columns:
      [leva-ivica] var(--left)
      [tekst-start] min(var(--content-width), 100%)
      [tekst-end] var(--right)
      [desna-ivica];
    gap: var(--gap);
    padding-block: 24px;
    min-height: 100vh;
  }

  /* samo da se vidi gde je šta */
  .demo{padding:16px;border-radius:10px;border:1px solid #ddd}
  .left   { grid-column: leva-ivica / tekst-start; background:#ffe9e9 }
  .content{ grid-column: tekst;                   background:#e9f7ff }
  .right  { grid-column: tekst-end / desna-ivica; background:#e9ffe9 }
  .full   { grid-column: leva-ivica / desna-ivica;background:#fffbe9 }

  /* dodatni blokovi da vidiš slaganje po redovima */
  .row{display:contents}
  .note{color:#666;font-size:.95rem}
  code{background:#fff;padding:2px 6px;border-radius:6px;border:1px solid #eee}