Ukázka třísloupcového responzivního layoutu s fixovaným menu v mobilním zobrazení - tato stránka se na mobilních zařízeních s rozlišením do 899px zobrazí automaticky bez sloupců, s horizontálním menu a grafickým bannerem, který je také responzivní (automaticky se přizpůsobuje šířce displeje). Menu je navíc při rolování stránky fixované, zastaví se po odrolování banneru a odjede až po odrolování celé stránky (resp. jeho rodičovského prvku, v našem případě <div id="obal">). Vše je možné otestovat i na desktopu pomocí CTRL+kolečka na myši.

Tato momentálně nejaktuálnější (2018) varianta konstrukce responzivního layoutu webu je řešena pomocí tzv. CSS Grid, viz základní CSS kód v pravém sloupci a celý HTML a CSS kód ve výpisu obou zdrojáků v prohlížeči. Tato varianta ale nefunguje v Exploreru (v Edge ano). Druhou lehce starší (i v Exploreru funkční) variantu pomocí flexboxu vyzkoušejte zde.

Příklad také ukazuje aktuální význam tagu <main> jako seskupovacího sémantického elementu pro sekci s hlavním obsahem webu, doporučuje se ho dnes používat místo původního významu pro hlavní "obal" celého webu včetně menu, hlavičky a paty webu. Dovnitř <main> tedy vložíme pouze <section>, <nav> a <aside> (<header a <footer> nikoliv) a nastavíme CSS Grid.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non nulla. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non nulla. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam.