Responsive CSS Grid bez media query

by bergb

HTML

<section>
  <h2>1. Fluidne kartice</h2>
  <div class="grid">
    <article>A</article><article>B</article><article>C</article><article>D</article><article>E</article>
  </div>
</section>

<section>
  <h2>2. Auto-fill mreža</h2>
  <div class="grid-fill">
    <article>1</article><article>2</article><article>3</article><article>4</article><article>5</article>
  </div>
</section>

<section>
  <h2>3. Galerija kvadratnih elemenata</h2>
  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
  </div>
</section>

<section>
  <h2>4. Layout sa sidebarom</h2>
  <div class="layout">
    <header>Header</header>
    <div>Main</div>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </div>
</section>

<section>
  <h2>5. Dve kolone koje same postaju jedna</h2>
  <div class="two">
    <div>Kolona 1</div>
    <div>Kolona 2</div>
  </div>
</section>

<section>
  <h2>6. Feature kartice s leading kolonom</h2>
  <div class="lead-cards">
    <div>Lead</div>
    <div>Kartica 1</div>
    <div>Kartica 2</div>
  </div>
</section>

<section>
  <h2>7. Grid lista (ime + vrednost)</h2>
  <div class="list">
    <div>Naziv</div><div>100</div>
    <div>Drugo</div><div>200</div>
    <div>Treće</div><div>300</div>
  </div>
</section>

<section>
  <h2>8. Kartice fiksnog min + fluidnog max</h2>
  <div class="cards">
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
  </div>
</section>

<section>
  <h2>9. Tiles layout sa promo karticom</h2>
  <div class="tiles">
    <div class="promo">Promo</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
</section>

<section>
  <h2>10. Masonry look (različite visine)</h2>
  <div class="masonry">
    <div style="height:4rem;">Kratak</div>
    <div style="height:8rem;">Srednji</div>
    <div style="height:12rem;">Dug</div>
    <div style="height:6rem;">Srednji</div>
    <div...

CSS

:root {
    --space: clamp(0.75rem, 1.5vw, 1.25rem);
    --cont: min(100% - 2rem, 80rem);
  }
  body {
    font-family: system-ui, sans-serif;
    background: #f6f6f6;
    color: #222;
    margin: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  section {
    width: var(--cont);
    background: white;
    padding: var(--space);
    border-radius: 0.75rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  article, div > div {
    background: #ddd;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    font-weight: 500;
  }

  /* 1) Fluidne kartice */
  .grid {
    display: grid;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  /* 2) Auto-fill */
  .grid-fill {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }

  /* 3) Galerija kvadrata */
  .gallery {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  .gallery > * {
    aspect-ratio: 1 / 1;
  }

  /* 4) Layout sa sidebarom */
  .layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 2fr) fit-content(28rem);
    grid-auto-flow: row dense;
  }
  .layout header,
  .layout footer {
    grid-column: 1 / -1;
    background: #ccc;
    padding: 1rem;
    border-radius: 0.5rem;
  }

  /* 5) Dve kolone koje padaju */
  .two {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  /* 6) Feature kartice */
  .lead-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(20rem, 2fr) repeat(auto-fit, minmax(14rem, 1fr));
  }

  /* 7) Grid lista */
  .list {
    --pad: clamp(0.75rem, 1.5vw, 1rem);
   ...