Moderní nativní CSS

Dotazy na velikost rodiče

Media query se ptá okna. Jenže to bývá špatná otázka: karta v postranním sloupci má úzko i na velkém monitoru, zatímco tatáž karta v hlavním obsahu má místa dost. Podle šířky okna se přitom obě chovají stejně.

Container query se ptá rodiče. Nejdřív se ale musí říct, který prvek se má měřit:

.card-slot {
  container-type: inline-size;
}

Hodnota inline-size znamená „měř mi šířku“. Na tu se pak dá ptát stejným zápisem, jaký známe z media query:

.card {
  display: grid;
  gap: var(--space);
}

@container (min-width: 24rem) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

Karta si teď o svém rozvržení rozhoduje sama a je jedno, kam ji na stránce vložíme. Přesně to od znovupoužitelné komponenty chceme – a přesně tenhle způsob uvažování budeme potřebovat, až se v modulu 04 pustíme do Reactu.

Pojmenované kontejnery

Když je kontejnerů nad prvkem víc, dá se vybrat, kterého se ptáme:

.sidebar {
  container: sidebar / inline-size;
}

@container sidebar (min-width: 20rem) {
  .card { ... }
}