CSS width – čo to je a čo o ňom reálne vieme

 

Niekedy ju nastavíme natvrdo, inokedy sa počíta z rodiča, z viewportu alebo z obsahu. Väčšina zmätkov vzniká práve vtedy, keď si nepovieme: od čoho sa táto šírka vlastne ráta?

---

Čo vlastne width robí

Ak chceme prvku povedať, aký má byť široký, použijeme vlastnosť width.

Inými slovami: „Tento element má zaberať presne toľkoto miesta na šírku.“

Najčastejšie sa používa na:

• layout (kontajnery, karty, sekcie),
• obrázky,
• formuláre,
• komponenty ako card, slider, sidebar a podobne.

Základná syntax

.ukazka {
  width: 150px;
}

Ak chceme responzívne správanie, zvyčajne nepridávame len samotné width, ale riešime aj max-width alebo min-width.

---

Najčastejšie hodnoty width

px – pevná šírka

.ukazka {
  border: 1px solid #a50000;
  width: 150px;
}

Presná hodnota, nezávislá od rodiča.

Problém: zle reaguje na menšie obrazovky, ak je prvok širší, než je dostupné miesto.

Použitie: ikonky, modaly, menšie fixné UI prvky, prípady, kde presne vieš, čo robíš.

% – percento z rodiča

.ukazka {
  border: 1px solid #a50000;
  width: 50%;
}

Počíta sa z rodičovského elementu, reaguje na zmenu layoutu a je veľmi časté v responzívnych rozloženiach.

Percentuálna šírka sa počíta z najbližšieho rodiča, ktorý má vypočítateľnú šírku.

Teda: 50 % neznamená polovicu obrazovky, ale polovicu rodiča.

vw – šírka viewportu

.ukazka {
  border: 1px solid #a50000;
  width: 100vw;
}

100vw = celá šírka viewportu.

Pozor: často spôsobí horizontálny scroll, najmä kvôli scrollbarom alebo paddingom okolo.

Používaj opatrne, najmä mimo hero sekcií alebo špeciálnych fullscreen blokov.

auto – nech rozhodne layout

.box {
  width: auto;
}

Defaultná hodnota.

Šírka sa riadi layoutom. Napríklad block prvok zvyčajne zaberie dostupnú šírku rodiča.

Často sa kombinuje s max-width.

---

ch – šírka znaku

ch je jednotka založená na šírke znaku „0“ v aktuálnom fonte.

V praxi sa veľmi hodí na obmedzenie šírky textu kvôli čitateľnosti.

.p {
  max-width: 65ch;
}

Tým negarantuješ presne 65 znakov v riadku, ale približne takú šírku, akoby sa tam zmestilo asi 65 monospace znakov.

A to je pre text často veľmi príjemné.

Dôležitý rozdiel: monospaced vs proporčné písmo

• Monospaced font (napr. Courier New) → každý znak má rovnakú šírku, takže 65ch je veľmi blízko 65 znakom.
• Proporčné fonty (Arial, Inter, Roboto…) → niektoré znaky sú úzke, iné široké, takže počet znakov v riadku kolíše, ale optická dĺžka riadku ostáva príjemná.

---

Responzívna klasika (odporúčaný vzor)

.ukazka {
  border: 1px solid #a50000;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

Význam:

• na mobile = 100 % dostupnej šírky,
• na veľkom monitore = maximálne 400px,
• centrovanie cez margin: 0 auto.

Toto je veľmi častý a zdravý pattern.

---

Menej známe, ale veľmi užitočné hodnoty

fit-content

.ukazka {
  border: 1px solid #a50000;
  width: fit-content;
}

Šírka sa prispôsobí obsahu.

Hodí sa napríklad na:

• badge,
• štítky,
• menšie tlačidlá,
• krátke boxy, ktoré sa nemajú zbytočne roztiahnuť.

Podpora je pre moderný web v poriadku.

min-content a max-content

.ukazka {
  border: 1px solid #a50000;
  width: min-content;
}

min-content → zbalí obsah na minimum, ako sa len dá.

max-content → roztiahne ho podľa obsahu bez zalamovania.

Použitie: špeciálne layouty, tabuľky, labely, prípady, kde chceš mať správanie veľmi presne pod kontrolou.

---

Moderné kombinácie (veľmi odporúčané)

clamp() – responzívna šírka bez media queries

.ukazka {
  border: 1px solid #a50000;
  width: clamp(300px, 50%, 800px);
}

Čítaj to takto:

• minimum: 300px,
• ideál: 50%,
• maximum: 800px.

To je veľmi praktické, keď nechceš robiť všetko cez media queries.

---

Mentálny model (dôležité)

Keď riešiš width, vždy si polož otázku:

„Od čoho sa táto šírka počíta?“

• px → od ničoho, je pevná
• % → od rodiča
• vw → od viewportu
• auto → od layoutu
• fit-content → od obsahu

Keď si toto ujasníš, polovica problémov s width zmizne sama.

---

width vs max-width

Toto je veľmi dôležitá dvojica:

• width hovorí: aká šírka sa má použiť,
• max-width hovorí: cez túto hranicu nechoď.

.box {
  width: 100%;
  max-width: 700px;
}

Toto je častý a bezpečný zápis. Prvok sa prispôsobí dostupnému priestoru, ale nebude zbytočne široký.

---

Zhrnutie

• width určuje šírku prvku
• najčastejšie sa kombinuje s max-width
• moderný web často používa percentá, max-width a clamp()
• fit-content a podobné hodnoty sú už na modernom webe bežne použiteľné
• vw používaj opatrne
• vždy sa pýtaj: od čoho sa tá šírka ráta?