Matyas.
SlužbyProjektyZkušenostiBlogKontakt
ENOzvěte se
Zpět na slovník
web-dev

CSS Grid

CSS Grid je dvourozměrný systém rozvržení, který umožňuje definovat řádky a sloupce současně, což jej činí ideálním pro složité rozvržení stránek. Na rozdíl od Flexboxu, který pracuje vždy v jedné ose, Grid umožňuje přesně umísťovat prvky jak horizontálně, tak vertikálně pomocí pojmenovaných oblastí nebo čísel řádků. Funkce jako grid-template-areas, auto-fill a minmax() umožňují vytvářet responzivní rozvržení s minimem kódu.

#web-dev

Související pojmy

Líné načítání

Líné načítání je optimalizační technika, která odkládá načtení nekritických zdrojů, dokud nejsou skutečně potřeba — typicky když se dostanou do viditelné oblasti stránky. Běžně se aplikuje na obrázky, videa a komponenty pod ohybem stránky pro urychlení počátečního načtení. Moderní prohlížeče podporují nativní líné načítání přes atribut `loading="lazy"`, zatímco řešení v JavaScriptu nabízejí větší kontrolu pomocí Intersection Observer.

Tree shaking

Tree shaking je technika eliminace mrtvého kódu používaná moderními bundlery jako Webpack, Rollup a esbuild k odstranění nepoužitých exportů z výsledného JavaScriptového bundlu. Spoléhá na statickou strukturu syntaxe ES modulů `import`/`export` k určení, který kód je skutečně referencován, a bezpečně odstraní zbytek. Pro efektivní tree shaking musí knihovny používat formát ESM a vyhnout se vedlejším efektům při inicializaci modulu, proto je důležité pole `sideEffects` v `package.json`.

Designový systém

Designový systém je sbírka znovupoužitelných komponent, pravidel a standardů, které zajišťují vizuální a funkční konzistenci napříč produktem nebo skupinou produktů. Typicky zahrnuje knihovnu komponent, design tokeny, typografická pravidla, barevné palety a dokumentaci. Designové systémy propojují práci designérů a vývojářů a umožňují týmům stavět rozhraní rychleji při zachování jednotného vzhledu.

Serverové renderování

Serverové renderování (SSR) je technika, při které se webové stránky renderují do HTML na serveru pro každý požadavek, místo aby se spoléhalo na klientský JavaScript pro sestavení stránky v prohlížeči. SSR poskytuje rychlejší počáteční načtení stránky a lepší SEO, protože vyhledávače obdrží kompletní HTML obsah. Moderní SSR ve frameworcích jako Next.js podporuje streaming, který umožňuje serveru progresivně odesílat HTML fragmenty, jakmile jsou připraveny.

BEM

BEM (Block Element Modifier) je CSS konvence pojmenování, která strukturuje názvy tříd jako `.block__element--modifier` pro vytvoření jasných, předvídatelných vztahů mezi HTML a CSS. Například `.card__title--highlighted` identifikuje zvýrazněný element nadpisu v bloku karty. Ačkoli moderní nástroje jako CSS Modules a utility frameworky snížily nutnost BEM, zůstává široce používán ve velkých kódových základnách a designových systémech, kde explicitní konvence pojmenování usnadňují týmovou koordinaci.

CSS moduly

CSS moduly jsou CSS soubory, kde jsou všechny názvy tříd ve výchozím nastavení lokálně omezené — při sestavení se automaticky transformují na unikátní identifikátory, čímž předcházejí kolizím názvů. Importují se do JavaScriptu jako objekt a třídy se odkazují jako `styles.button` místo prostých řetězců. Tento přístup je nativně podporován bundlery jako Webpack, Vite a Next.js a nabízí izolaci stylů bez runtime zátěže CSS-in-JS.

Všechna slova
Matyas.

Weby, mobilní appky a automatizace s AI. Pomáhám firmám šetřit čas i peníze technologií, která opravdu funguje.

Odkazy

  • Služby
  • Projekty
  • Zkušenosti
  • Blog
  • Slovník
  • Kontakt

Připravuji

  • Případové studieBrzy
  • Zdroje

© 2026 Matyas Prochazka. Všechna práva vyhrazena.