Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

Rozložení HTML stránky

Aneb jak mít efektivní a přehledný web
Předchozí Následující

#1 Rozložení

Rozložení, často používaný anglický název layout, je základním stavebním kamenem každé webové stránky. Prakticky se jedná o uspořádání prvků na stránce tak, aby obsah stránky z rozložení jasně vyplýval.

#2 Druhy rozložení

Pro poskládání prvků do správného rozložení existují čtyři základní techniky:

CSS flexbox

V současnosti nejpoužívanější typ rozložení, flexbox aneb flexible box layout. Uživateli dovoluje manipulovat s prvky předvídatelně a tak, že i při zmenšení, se vytváří konzistentní responzivita.

Flexbox pracuje s hlavní a vedlejší osou a pozicí na stránce – jednoduše lze prvky zarovnávat na jakoukoli stranu i výškově.

CSS grid

Druhý nejpoužívanější typ – grid neboli mřížka – je založený na rozložení prvků do obdélníkové nebo čtvercové mřížky. Prvky se dají umístit do sloupců a/nebo řad, podobně jako do tabulky.

Více v našem návodu pro CSS grid.

CSS float

Před rozmachem flexboxu velmi populární metoda rozložení stránky. Jedná se o jednoduché umísťování prvků na stránce doprava a doleva. V dnešní době již moc nepoužívaný.

Upozornění: V dnešní době se od něj ustupuje, jelikož způsobuje problémy s flexibilitou a je náročnější na vytvoření správné respozivity.

Přesto si o něm můžete přečíst více v našem CSS float tutoriálu.

Frameworky

Jedná se o knihovny, které mohou developerovi pomoci s vytvářením stránky. Mezi nejčastěji používané se jedná Bootstrap.