S1 – Foundations Refresh

Intrinsic Sizing

min-content·max-content·fit-content

Živá ukázka — šířka boxu se mění podle vybrané hodnoty

Toto je krátký text.

A toto je podstatně delší věta, která ukazuje, jak se box roztáhne nebo zabalí.

0 —
Srovnání všech hodnot vedle sebe:
width: auto
Box vyplní dostupný prostor rodičovského elementu.
width: min-content
Box je tak úzký, jak dovoluje nejdelší nespolknutelné slovo.
width: max-content
Box je přesně tak široký, aby se vešel celý obsah na jeden řádek.
width: fit-content
Box se smrskne na šířku obsahu, ale nepřekročí kontejner.

Intrinsic sizing v layoutu

fit-content + margin-inline: auto Centrování bez pevné šířky
Tato zpráva se přizpůsobí délce textu a zůstane vycentrovaná.
Kratší zpráva.
grid-template-columns: max-content 1fr Štítky se auto-šíří podle nejdelšího, pole vyplní zbytek
Jméno
E-mailová adresa
Tel.
grid-template-columns: max-content 1fr max-content Postranní sloupce zaberou přesně tolik místa, kolik potřebují
Název stránky
/* Intrinsic sizing — základní hodnoty */

.box { width: min-content; }  /* šířka nejdelšího slova */
.box { width: max-content; }  /* šířka celého obsahu na jednom řádku */
.box { width: fit-content; }  /* max-content, ale nepřekročí kontejner */

/* Centrování bez pevné šířky */
.callout {
  width: fit-content;
  margin-inline: auto;
}

/* Grid — štítek se přizpůsobí, pole vyplní zbytek */
.form-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--base-2);
}

/* Grid — postranní sloupce se přizpůsobí obsahu, střed se roztáhne */
.header {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
}

/* fit-content(300px) — jako fit-content, ale s explicitním maximem */
/* Smrskne se na šířku obsahu, nepřekročí však 300 px               */
.tag {
  width: fit-content(300px);
  /* Kratší obsah → šířka = obsah                                   */
  /* Delší obsah  → šířka zastropovaná na 300 px                    */
}