Ukázkové cvičení krok

za krokem: „Responzivní

karta projektů“

(CSS Grid)

Cíl: vytvořit responzivní přehled „karet“ (např. projekty, produkty, články), který se sám přizpůsobí šířce obrazovky pomocí repeat(auto-fit, minmax()) a gap. Vycházíme z principů: aktivace gridu, definice sloupců/řádků, mezery, automatické rozmístění a responzivita.

Krok 1 – HTML kostra (kontejner + položky)

Vytvořte soubor index.html:


    <!doctype html>
    <html lang="cs">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>CSS Grid – Karty</title>
      <link rel="stylesheet" href="styles.css" />
    </head>
    <body>

      <main class="page">
        <h1>Moje projekty</h1>

        <section class="grid">
          <article class="card">
            <h2>Projekt 1</h2>
            <p>Krátký popis projektu.</p>
            <a class="btn" href="#">Detail</a>
          </article>

          <article class="card">
            <h2>Projekt 2</h2>
            <p>Krátký popis projektu.</p>
            <a class="btn" href="#">Detail</a>
          </article>

          <article class="card">
            <h2>Projekt 3</h2>
            <p>Krátký popis projektu.</p>
            <a class="btn" href="#">Detail</a>
          </article>

          <article class="card">
            <h2>Projekt 4</h2>
            <p>Krátký popis projektu.</p>
            <a class="btn" href="#">Detail</a>
          </article>
        </section>
      </main>

    </body>
    </html>

Krok 2 – Základní CSS (typografie a šířka stránky)

Vytvořte styles.css:


    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.5;
    }

    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px;
    }

    h1 { margin: 0 0 16px; }

Krok 3 – Aktivace CSS Gridu a automatické rozmístění

Teď z kontejneru .grid uděláme mřížku a nastavíme 2 sloupce:


    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

Výsledek: karty se automaticky rozloží do dvou sloupců a více řádků.

Krok 4 – Styl karet (aby bylo vidět rozvržení)

Doplníme jednoduchý vzhled karet:


    .card {
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 16px;
      background: #fff;
    }

    .card h2 { margin: 0 0 8px; }
    .card p  { margin: 0 0 12px; }

    .btn {
      display: inline-block;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none;
      border: 1px solid #222;
      color: #222;
    }

Krok 5 – Responzivita bez media queries (auto-fit + minmax)

Nahradíme pevné 2 sloupce responzivní variantou:


    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }

Princip: jakmile se na šířku nevejdou 2 (nebo 3) sloupce, grid sám sníží jejich počet a zachová čitelné minimum.

Krok 6 – „Zvýrazněná karta“ přes více sloupců (ruční umístění)

Chceme, aby první karta byla „hlavní“ a zabrala dva sloupce (na širší obrazovce).

1. Upravte první article na:


    <article class="card featured">
      <h2>Projekt 1 – hlavní</h2>
      <p>Výraznější projekt přes více sloupců.</p>
      <a class="btn" href="#">Detail</a>
    </article>

2. Doplňte do CSS:


    .featured {
      grid-column: 1 / -1; /* zabere celý řádek (všechny sloupce) */
    }

Tím ukazujete ruční řízení pozice přes grid-column (v materiálu uvedeno jako klíčová vlastnost).

Praktické cvičení pro žáky (45 minut): „Školní rozcestník“ v CSS Grid

Zadání

Navrhněte rozvržení stránky „Školní rozcestník“, které bude obsahovat:

1. Header (název školy)

2. Navigace (menu)

3. Hlavní obsah (karty s odkazy: Rozvrh, Suplování, Jídelna, Učebny, Projekty, Kontakty…)

4. Postranní panel (rychlé informace: „Aktuality“, „Dnes ve škole“)

5. Footer (copyright)

Rozvržení musí být vytvořeno pomocí CSS Grid a splnit podmínky níže. Využijte pojmy: display: grid, grid-template-columns, gap, grid-column/grid-row nebo grid-template-areas, a responzivitu přes auto-fit/minmax.

Technické požadavky (hodnoticí kritéria)

A. Layout (max 10 b)

Grid aktivován na hlavním kontejneru stránky (2 b)

Použité sloupce + mezery gap (2 b)

Rozložení pomocí grid-template-areas (doporučeno) nebo ruční grid-row/grid-column (3 b)

Header a footer přes celou šířku (3 b)

B. Sekce s kartami (max 10 b)

Karty v gridu, automatické rozmístění (2 b)

Responzivita pomocí repeat(auto-fit, minmax(...)) (4 b)

Jedna „zvýrazněná“ karta přes celý řádek nebo přes 2 sloupce (4 b)

C. Čitelnost a struktura (max 5 b)

Smysluplné názvy tříd, čisté odsazení (2 b)

Oddělené soubory index.html a styles.css (1 b)

Základní typografie a vizuální přehlednost (2 b)

Celkem: 25 bodů

Doporučená kostra HTML (žáci mohou použít)


    <main class="layout">
      <header class="header">Školní rozcestník</header>

      <nav class="nav">
        <a href="#">Domů</a>
        <a href="#">Studium</a>
        <a href="#">Projekty</a>
        <a href="#">Kontakt</a>
      </nav>

      <section class="cards">
        <article class="card featured">Rozvrh</article>
        <article class="card">Suplování</article>
        <article class="card">Jídelna</article>
        <article class="card">Učebny</article>
        <article class="card">Projekty</article>
        <article class="card">Kontakty</article>
      </section>

      <aside class="aside">
        <h2>Aktuality</h2>
        <ul>
          <li>Termín testu: pátek</li>
          <li>Exkurze: příští týden</li>
        </ul>
      </aside>

      <footer class="footer">© 2026</footer>
    </main>