Lekce 1.1

CSS Grid do hloubky

Linie a souřadnice v mřížce, rozvržení nakreslené jmény oblastí, řádky, které dokreslí prohlížeč, a galerie, jež se přizpůsobí sama.

Cvičení 1

Kostra

Co si vyzkoušíte

Postavíte rozvržení stránky jen z grid-template-areas a grid-area. Ve výchozím stavu máte hotové HTML se čtyřmi prvky a style.css, ve kterém je zatím jen typografie – žádná mřížka.

CodePen

Zadání máte připravené na CodePenu: Kostra stránky. Otevřete si ho a pracujte rovnou v něm.

Prvky v HTML vypadají takhle a měnit je nepotřebujete:

html
<body class="page">
  <header>Studentský web</header>
  <nav>Domů · Články · Kontakt</nav>
  <main>Sem přijde obsah stránky.</main>
  <footer>© 2026</footer>
</body>

Cílem je rozvržení z obrázku. Širším oknem se zabývá tohle cvičení, úzkým to následující.

Dvě podoby téže stránky. Vlevo širší okno: hlavička přes celou šířku, pod ní navigace vlevo a obsah vpravo, dole patička. Vpravo úzké okno: hlavička, navigace, obsah a patička pod sebou v jednom sloupci.

Zadání

  1. Přepněte .page na display: grid.
  2. Nakreslete mustr o dvou sloupcích a třech řádcích: hlavička přes celou šířku, pod ní navigace vlevo a obsah vpravo, dole patička přes celou šířku.
  3. Nastavte sloupcům šířky 200px a 1fr a přidejte gap: 16px.
  4. Přiřaďte každému ze čtyř prvků jeho oblast přes grid-area.
  5. Zapněte ve vývojářských nástrojích odznak grid u .page a zkontrolujte, že mřížka vypadá tak, jak jste ji nakreslili. Přečtěte si z ní čísla linií.
  6. Smažte schválně jedno jméno z jednoho řádku mustru a podívejte se, co se stane. Pak změnu vraťte – tuhle chybu budete dělat často a je dobré ji poznat.

Bonus

  1. Přidejte .page { min-height: 100vh; } a řádkům dejte grid-template-rows: auto 1fr auto. Patička se tím přilepí ke spodní hraně okna i na krátké stránce.
  2. Prohoďte v mustru navigaci a obsah, takže bude menu vpravo. Do HTML ani do grid-area přitom nesahejte.
  3. Napište totéž rozvržení podruhé, tentokrát úplně bez grid-template-areas – jen přes grid-column a grid-row u každého ze čtyř prvků. Zápis si někam uložte a rozhodněte, který z těch dvou se vám čte líp.