Karty a fotogalerie

Ukaž mi to: karta

Karta je bílý obdélník se stínem, který drží pohromadě obrázek a text. Znáš je z YouTube, Netflixu i e-shopů. Karta je jen krabice s pár vlastnostmi:

<div class="karta">
  <img src="obrazky/fotka.jpg" alt="Popis fotky">
  <h3>Nadpis karty</h3>
  <p>Krátký text ke kartě.</p>
</div>

.karta {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Dvě novinky:

• <div> je prázdná krabice bez vlastního významu – prostě „balíček”, do kterého zabalíš věci, co patří k sobě.
• box-shadow je stín: čísla znamenají posun doprava, posun dolů, rozmazání a barvu (tady černá s průhledností 10 %). Stín dělá z placky kartu.

Ukaž mi to: karty vedle sebe

A teď trik, který už znáš – flexbox. Zabal karty do krabice a tu nastav jako flex:

<div class="karty">
  <div class="karta">…</div>
  <div class="karta">…</div>
  <div class="karta">…</div>
</div>

.karty {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.karty .karta {
  flex: 1;             /* karty si spravedlivě rozdělí místo */
  min-width: 200px;    /* ale žádná nebude užší než 200px */
}

flex-wrap: wrap + min-width = na počítači jsou karty vedle sebe, na mobilu se poskládají pod sebe. Právě jsi vyrobil(a) responzivní web – web, který se přizpůsobí každé obrazovce.

Teď ty 💪

Přidej na svůj web sekci s kartami – aspoň tři vedle sebe. Co na nich bude, záleží na projektu:

<h2>Naši učitelé</h2>
<div class="karty">
  <div class="karta">
    <h3>Paní učitelka Nováková</h3>
    <p>Třídní 4. B. Učí češtinu a výtvarku. Má ráda kočky.</p>
  </div>
  <div class="karta">
    <h3>Pan učitel Svoboda</h3>
    <p>Matematika a tělocvik. Vede kroužek florbalu.</p>
  </div>
  <div class="karta">
    <h3>Paní ředitelka Malá</h3>
    <p>Vede školu už 10 let. Hraje na klavír.</p>
  </div>
</div>

<h2>Moje koníčky</h2>
<div class="karty">
  <div class="karta">
    <img src="obrazky/fotbal.jpg" alt="Já při zápase">
    <h3>Fotbal</h3>
    <p>Hraju za žáky, pozice útočník. Letos 12 gólů!</p>
  </div>
  <div class="karta">
    <img src="obrazky/minecraft-stavba.jpg" alt="Můj hrad v Minecraftu">
    <h3>Minecraft</h3>
    <p>Stavím obří hrady. Tenhle mi trval měsíc.</p>
  </div>
  <div class="karta">
    <h3>Programování</h3>
    <p>Právě stavím tenhle web. A tohle je teprve začátek.</p>
  </div>
</div>

<h2>Naše výlety</h2>
<div class="karty">
  <div class="karta">
    <img src="obrazky/sumava.jpg" alt="Výhled z Poledníku">
    <h3>Šumava</h3>
    <p>Třídenní přechod. Nejlepší: borůvky a rozhledna.</p>
  </div>
  <div class="karta">
    <img src="obrazky/more.jpg" alt="Zátoka na Krku">
    <h3>Chorvatsko</h3>
    <p>Týden u moře. Viděli jsme delfíny!</p>
  </div>
  <div class="karta">
    <img src="obrazky/petrin.jpg" alt="Petřínská rozhledna">
    <h3>Praha</h3>
    <p>Muzeum, Petřín a zrcadlové bludiště.</p>
  </div>
</div>

<h2>Soupiska</h2>
<div class="karty">
  <div class="karta">
    <h3>Kuba · brankář 🧤</h3>
    <p>Kapitán týmu. 5 čistých kont v sezóně.</p>
  </div>
  <div class="karta">
    <h3>Ondra · záloha ⚡</h3>
    <p>Nejrychlejší hráč týmu. 8 asistencí.</p>
  </div>
  <div class="karta">
    <h3>Tomáš · útok 🎯</h3>
    <p>Nejlepší střelec. 14 gólů v sezóně.</p>
  </div>
</div>

A ke všem projektům stejné CSS:

.karty {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.karty .karta {
  flex: 1;
  min-width: 200px;
}

.karta {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Bonus: fotogalerie

Máš hodně fotek? Mřížka fotek je ještě jednodušší – stačí aspect-ratio a object-fit, aby byly všechny stejně velké:

<div class="galerie">
  <img src="obrazky/f1.jpg" alt="…">
  <img src="obrazky/f2.jpg" alt="…">
  <img src="obrazky/f3.jpg" alt="…">
  <img src="obrazky/f4.jpg" alt="…">
</div>

.galerie {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.galerie img {
  width: 180px;
  aspect-ratio: 1;      /* čtverec */
  object-fit: cover;    /* fotka čtverec vyplní a ořízne se, nerozplácne se */
}

Co si z téhle lekce odnést

• <div> je balicí krabice pro věci, které patří k sobě.
• Karta = pozadí + border-radius + padding + box-shadow.
• Flexbox s flex-wrap a min-width = rozložení, které funguje na počítači i mobilu.

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu