30.09.2023 01:15 Subgrid umožní vytvořit zanořenou mřížku, která zároveň podědí layout rodičovského gridu. Je to velmi praktické a nově podporované ve všech prohlížečích. Subgrid je součástí specifikace CSS gridu. Grid je skvělý, ale dříve či později se s ním dostaneme do situace, kdy potřebujeme jeden grid zanořit do druhého. V takové situaci si pak pochopitelně přejeme, aby vnitřní grid dokázal podědit vnější layout. Jak vidíte na obrázku níže, subgrid mám to pomůže zařídit. Vnitřní části položek budou lícovat, i když mají různě velký obsah. Grid a subgrid. Táta a syn. Můžeme to samozřejmě zajistit i bez subgridu: Nastavit prvkům fixní rozměry na výšku nebo použít JavaScript . Staré páky mezi kodéry si vzpomenou na složité tabulkové layouty, kterými se toho dalo dosáhnout, ale ve kterých se nikdo nevyznal… Jak na to jít dobře, se subgridem? Příklad s kartou produktu Víte vy co? Ukážu vám to na jednoduchém příkladu. Na obrázku výše totiž vidíte layout podobný tomu, který používám na Vzhůru dolů. Mám seznam položek, říkejme jim karty produktu. Každá karta má složitější strukturu, ve které najdete nadpis, obrázek, text a tlačítko: Text… Tlačítko… Vnější rozvržení, tedy to, které se týká vodorovného umístění karet, udělám gridem. To žádný problém nebude: .container Umísťuji zde dvě položky ). Přeji si, aby nebyly užší než 250px a širší než 400px. Mezera mezi položkami je 4rem. To bude asi bez problémů, že? Ale když já chci, aby nadpisy, obrázky, texty i tlačítka jednotlivých karet byly vždy ve stejné výšce. Přidáváme layout pro jednotlivé karty Nejprve musíme změnit rodičovský layout. Uděláme to tak, že přidáme řádky pomocí vlastnosti grid-template-rows. .container Jak vidíte, nemáme příliš velké ambice položky layoutu nějak omezovat. Víme jen, že budou čtyři . A hodláme je pouze zarovnávat mezi sebou navzájem. A teď kouzlo, subgrid Zápis pro vnitřní mřížku u jednotlivých položek, který řešíme podmřížkou , bude: .item Prohlížeči dáváme tyhle instrukce: Budiž grid ! Umísti tuto položku do čtyř buněk gridu . Svislý směr mřížky nechť je subgridem, takže po gridu zdědí vnější mřížku . Je to jasné? Výsledek uvidíte na obrázku, který vám snad pomůže s pochopením celé věci, což je opět možné zkoušet na živé ukázce. Zelená podmřížka si hoví v modré mřížce a je spokojená. My také, protože vnitřní položky karet jsou navzájem zarovnané. Živá ukázka vám řekne více. Poznámky k subgridu V době aktualizace textu prohlížeče zvládají subgrid poměrně čerstvě, proto nepůjdu u této části CSS gridu úplně do hloubky. Pár poznámek zde ale uvedu: Vícerozměrnost sugridu V ukázce jsme pro podmřížku využili jen svislý směr rodičovského layoutu. Je ale samozřejmě možné využít i vodorovný nebo prostě oba směry najednou. Pak se z toho stává jeden velký tabulkový layout, jako z roku 2002. Dělám si legraci, je to samozřejmě daleko lepší než layout v . Dědění mezer Vlastnost gap se z rodičovského gridu samozřejmě dědí i na ten vnitřní. Je ale možné si mezery ve vnitřním layoutu změnit novou deklarací gap. Žádné přidávání implicitních řádků nebo sloupců V běžném gridu je možné pomocí vlastností grid-auto- definovat rozvržení pro řádky či sloupce. Ty se automaticky přidají, když se rozšíří obsah v HTML. Je asi pochopitelné, že toto v subgridu možné není. Vždy se jen umísťuje do mřížky, která je zděděná shora od rodičovského gridu. Podpora v prohlížečích Subgrid je součástí specifikace CSS Grid Layout Module již od Level 2, která se datuje do roku 2018. Zde je stav k září 2023: Firefox podporuje subgrid od verze 70 z prosince 2019. Safari subgrid přidalo v září 2022 do verze 16, od iOS 16 a v aktualizaci pro macOS Monterey a Big Sur. Jako poslední se v září 2023 přidal Chrome a Edge. Aktuální informace od podpoře hledejte na CanIUse.com/css-subgrid Podpora subgridu mě velmi těší a nemůžu se dočkat, až mi v komentářích napíšete, jak jej v praxi používáte. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
27.09.2023 06:45 JavaScriptový framework Qwik vypadá slibně. Přináší jej tým kolem Builder.io, ve kterém byste našli i autora původního Angularu – Miška Heveryho. S Petrem Glaserem, který byl našim milým hostem, tak trošku navážeme na předchozí díl, protože Qwik slibuje pomoc s mnoha výkonnostními neduhy současné generace frameworků v čele s Reactem. Jak moc se mu to podaří a jak dokáže oslovit vývojáře? Pojďme diskutovat. Podcast Host: Petr Glaser Petr v rámci projektu Nauč mě IT pomáhá lidem získat dovednosti a znalosti vhodné pro práci v IT. Říká o sobě, že je vývojář zapálený pro technologie a vzdělávání. Zaměřuje se na performance, kterou vnímá jako součást UX a přístupnosti. I díky tomu si oblíbil framework Qwik, o kterém je řeč v podcastu. LinkedIn – Twitter O čem se bavíme? Martinův tip: Figma dev mode, video Adiny, podcast o Figmě. Robinův tip: State of CSS je tady, tentokrát velmi brzy. Petr Glaser a Nauč mě IT. Představení frameworku Qwik. Server Side a meta-framework Qwik City. Hlavní výhody: velikost bundlu, líné načtení, vliv na rychlost. Úspěchy Qwiku ve framework benchmark a ošemetnosti toho. Autoři Qwiku: Builder.io a příběh vzniku Qwiku. Dokáže Qwik oslovit vývojáře zvyklé na React a spol.? Rozdíly mezi aplikacemi a prezentacemi. Vliv ekosystému frameworku na výstupní výkon a Qwikify. Cena za menší úvodní bundle. Stavění na Service Worker, Partytown na optimalizaci třetích stran. Jednou to za nás stejně bude všechno dělat AI. Tipy na další zdroje: Discord atd., Steve z Builderu, Miško Hevery Ukázka: možné přínosy a ošemetnosti v přístupu Qwiku Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
27.09.2023 06:45 Už po osmé vás na Vzhůru dolů zvu na každoroční konferenci WebExpo, sraz lidí z oblastí webového designu, vývoje a digitálního marketingu. WebExpo 2023 proběhne netypicky už 19. a 20. dubna, ale na typickém místě, v centru Prahy. Konferenci Šárky Štrossové a jejího týmu mám rád hlavně pro skvělé možnosti potkávání s kolegy a kolegyněmi. Velmi rád si sem také chodím rozšířit obzory mimo své hlavní zaměření . Vybral jsem pro vás několik přednášek, které mě v programu zaujaly, nebo si myslím, že by je čtenáři Vzhůru dolů neměli propást. Z frontendových luhů a hájů Futuristic UI: How to make users feel like they’re in a sci-fi movie, protože Filip Hráček, kterého znáte z podcastu. Authentication UX, protože Vitaly Friedman inspiruje, i když mluví o něčem, co zrovna nepotřebujete. Extending HTML with Web Components, protože mě zajímá, kdy už budou konečně Web Components široce použitelné. You might not need css-in-js, protože si myslím, že některé důvody pro CSS-in-JS už opravdu neplatí. Tak schválně…! Why local-first software fixes everything, protože sice nevěřím, ale i tak si moc rád Dana Steigerwalda poslechnu. More than words: Designing and building voice interfaces, protože ovládání hlasem bude s nástupem AI lidem ještě blíž. Supercharge your skills with creative coding, protože ano, v současném webdesignu je kreativita na ústupu a je to škoda. How to make and share more flexible UI components, protože po letech zase trochu více přemýšlím nad UI a design systémy mě znovu více zajímají. Shape Up Development Process, protože Honzovi Korbelovi věřím, že už pak nebudu muset číst knihu, na kterou se už léta chystám. Rychlost webu Harry Roberts jezdí na WebExpo často a rád. Jeho přednášky jsou vždy plné pokročilejších tipů, proto nevynechám jeho talk Optimising Largest Contentful Paint. Velmi doporučuji i Harryho páteční workshop. Letos dorazí i hvězdný Scott Jehl z WebpageTestu a bude povídat na téma Experimenting with performance at the edge. Z oblasti rychlosti ale toho na WebExpu můžete slyšet a vidět více – například microservices, Livesport News nebo invalidaci více keší od stejné firmy. Stopa Vzhůru dolů Po loňském podílnictví na tvorbě programu a krátké keynote mám letos více času a prostoru a tak se vám v přednášce Shift happens: Dealing with Cumulative Layout Shift během 20 minut pokusím předat návod na pochopení metriky CLS a tipy na její optimalizaci. Robin Pokorný bude diskutovat v bloku How to Become a Staff+ Engineer . Riki Fridrich vás ve Write testable code naučí psát lepší kód. Soutěž o vstupenku a knížku pro juniorní vývojáře Od organizátorů jsem dostal vstupenku navíc a rád bych ji věnoval někomu, kdo ji opravdu ocení. Pojďme si proto zasoutěžit o jednu vstupenku a jednu knížku s e-bookem, jako cenu útěchy. Podmínky jsou tyto: Soutěž je určená pro juniorní vývojářky a vývojáře, kteří v oboru nepracují více než 3 roky. Do komentáře pod článkem nebo do e-mailu martin@vzhurudolu.cz pošlete odkaz na váš LinkedIn profil a odpovězte na otázku: „Co vás na webařině nejvíc baví?” Z odpovědí vylosuji dva lidi, jeden dostane knížku a druhý vstupenku na WebExpo. Uzávěrka soutěže je v neděli 26. 3. 2022 o půlnoci. Pro vás ostatní tady od WebExpa mám slevičku: Hodně štěstí a na viděnou na WebExpu!
16.09.2023 02:30 Vítejte u 44. epizody podcastu ze Vzhůru dolů! Natočili jsme ji tak, aby vám byla průvodcem po záznamech přednášek z letošního WebExpa. Ano, záznamy už jsou veřejně a zdarma dostupné. Co se nám líbilo? Samozřejmě kromě networkingu, setkávání a parties… Podcast O čem se bavíme? Robin, Martin a WebExpo: historie jednoho vztahu Local First od Daniela Steigerwalda AI: „Shift Happens“ a prompty pro copywritery od Vladany Bačové Robinův nový podcast o Engineering Leadership Voice Interfaces, zvukové značky a přednáška Leonie Watson Nepřednášková část WebExpa, ta nejlepší Pozvánka na WebExpo 2024 Bonus: To nejlepší z WebExpa 2023 Top 3 přednášky Vladana Bačová: AI text generators – are they a threat or benefit for content writers? – pokud jste copík je to must, pokud vývojář, nudit se nebudete. Léonie Watson: More than words: Designing and building voice interfaces – překvapivé možnosti CSS, které ale zatím prohlížeče nepodporují. Harry Roberts: Optimising Largest Contentful Paint – vše o metrice LCP. Pokud řešíte rychlost, Harryho asi asi už stejně žerete. Co mě dále zaujalo a kde jsem byl duchem alespoň chvíli přítomen? Filip Hráček: Futuristic UI – moc pěkné a v nejlepším smyslu slova inspirativní. Dmitry Belyaev: You might not need css-in-js – Dmitrij pokryl sice jen malou část problematiky z názvu, ale velmi dobře JS vývojářům přiblížil výhody Custom Properties v CSS. Daniel Steigerwald: local-first software – aplikace Apple se výborně synchronizují nejspíš právě proto, že jsou local first. Architektura client-server je špatná z pohledu DX, i proto je local-first zajímavý směr. Ondřej Čermák: How to make sure your system doesn’t blow – škálování i performance nemusí vždy pomoci. Základ je dobře měřit. Přesně tak! Je super, že to občas řekne i někdo jiný než já. Jhey Tompkins: Supercharge your skills with creative coding – zajímavé ukázky kreativních rozhraní s HTML a CSS. Jen strašně, ale strašně malinké písmo v ukázkách kódu. Server-Side: The newest website tracking concept: Pavel Šabatka - pěkně podané argument proč zvážit serverové GTM, jak to zhruba udělat a co to stojí. Je to jednodušší než jsem si myslel. Rowdy Rabouw: Extending HTML with Web Components – výborně podaný tutoriál, jak začít namísto komponent JS frameworků používat nativní Web Components. Pořád ale nevím, proč to vývojáři nepoužívají více. Scott Jehl: Experimenting with performance at the edge – po dlouhém obecném úvodu Scott ukázal Experiments ve WebpageTestu, které vám umožňují otestovat vliv změny kódu na rychlost přímo na produkčním webu. To je velmi zajímavé. Když už v tom budete, pusťte si i moji přednášku Shift happens: Dealing with Cumulative Layout Shift . Je prý bezva, říkali lidi. Ahoj za rok na WebExpu 2024! Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
06.09.2023 09:31 Po velmi úspěšném online FrontKonu 2021 jsme rozhodli, že vyzkoušíme sílu komunity na opravdové živé konferenci. 30 přednášek, 400 frontendistek a frontendistů. V hotelu. V Brně. 12. října. To bude frontendový mazec, vážení. Na webu už je program, sledujte frontkon.cz. Na mě v rámci štábu připadl hlavně program. Ne, že by s ním nebylo dost práce, ale opět se ukázalo, že komunita výborně funguje. Přes „call for papers“ se nám sešlo opravdu hodně zajímavých přednášek. Začínalo to vypadat, že budeme muset udělat konference dvě. Vyberu alespoň některé z témat: O vlivu na AI na naši práci bude mluvit David Grudl, Hana Klingová a Honza Sládek. Moderní JS frameworky ve svých přednáškách a v diskuzích zmíní např. Borek Bernard, Riki Fridrich nebo Libor Vaněk. Novinky v CSS a jeho směřování řeší přednášky Jana Svěráka nebo Kateřiny N. Volákové. Téma juniorů na frontendu probereme s Yablkom, Martou Kirchgessner a Honzou Javorkem. Je toho ale daleko více – namátkou např. Vercel, estimace projektů, design systémy, TypeScript nebo třeba osobní rozvoj. Uvidíme se? frontkon.cz
05.09.2023 00:00 Vlastnost display slouží k určení způsobu vykreslení prvku v CSS. Na tom nic není. Tento článek se vám ale pokusí ukázat, že může jít i o relativně komplikovanou věc. Vy, kteří znáte její základní hodnoty jako block nebo inline, možná budete překvapení, že od roku 2020 zde máme novou verzi specifikace, jež přidává řadu dalších možností – „CSS Display Module Level 3“. vrdl.in/w3disp Začneme jednoduchým přehledem nejužitečnějších hodnot vlastnosti display. Většinu z nich asi znáte. Hodnota Jak se zobrazuje inline Řádkový element, který netvoří zalomení před sebou nebo po sobě . block Blokový element. Zalomí řádky před sebou i po sobě. inline-block Vnitřně se jedná o blokový element, zvnějšku inline, který netvoří zalomení. flex, inline-flex Vytvoří flexboxové rozvržení. Inlinová varianta nezalomí řádky před a po. grid, inline-grid Vytvoří rozvržení do mřížky. Inlinová varianta nezalomí řádky. table, inline-table Rozvržení do tabulky. Inlinová varianta opět tvoří tabulku v řádce. none Nevykreslí prvek, ale ani jeho potomky. V tabulce zdaleka nejsou všechny možnosti a jejich specifické vlastnosti, nástrahy a vychytávky. Proto čtěte dál. Víte například, že…? S pomocí hodnoty flow-root nemusíte pro „floaty“ používat „clearfix“, tedy reset plovoucího layoutu? Prohlížeče nově podporují víceslovná označení jako inline flex? Pro skrytí prvku existuje kromě hodnoty none také hodnota contents. A víte, co umí? Vnitřní a vnější zobrazení První věc, kterou si musíme uvědomit, je holý fakt, že podle specifikace nově existují dva typy zobrazení: Vnitřní zobrazení Hodnota vlastnosti display určuje, jak prohlížeče rozloží potomky prvku, nebo jinak také vnitřní elementy. Sem patří hodnoty jako flex, grid nebo table. Vnější zobrazení Hodnota definuje, jak se sám prvek zobrazuje vůči svému okolí. Pohled zvenčí. Toto určují hodnoty jako inline, block nebo none. Máte? Výborně. Toto se nám bude hodit, až budeme hovořit o hodnotách pro více klíčových slov. Vnější zobrazení Vnější zobrazení v podstatě určuje roli stylovaného boxu v uspořádání toku stránky. Vlastnost display. Hodnoty pro vnější zobrazení jsou naši staří známí. Do tohoto typu zobrazení patří následující hodnoty: inline Vytvoří boxík, který je „inline-level“, řádkový. Před sebou a po sobě nic nezalomí, prostě se vykreslí do řádky. block Vygeneruje boxík, který je „block-level“. Zjednodušeně to znamená, že se vykreslí do celé šířky rodiče a zalomí řádky před sebou i po sobě. inline-block Generuje boxík, který se zvenčí chová jako řádkový a uvnitř generuje vždy nový blokový kontext. Mimochodem, specifikace počítá s touto hodnotou do budoucna jen jako s jiným zápisem pro dvojici klíčových slov inline flow-root. O tom píšu později. run-in Vygeneruje typ „inline-level“ boxu se zvláštním chováním – pokusí se vložit sám sebe do následujícího blokového prvku. Pokud za prvkem „run-in“ následuje blokový prvek, „run-in“ se stane jeho prvním inline boxem. Pokud bude následovat inlinové pole, stane se z prvku „run-in“ prvek blokový. V CodePenu si můžete vyzkoušet všechny možnosti. Varianta s typem zobrazení run-in v mé ukázce chybí, není totiž podporovaná jinde než v Internet Exploreru . V tomto dědečkovi mezi prohlížeči nefunguje CodePen, takže byste z ukázky nic neměli. Viz podpora na CanIUse. caniuse.com/run-in Dědeček je už ale bohužel mrtvý, takže ani run-in vás zajímat nemusí. Vnitřní zobrazení Hodnoty vnitřního zobrazení zapínají uvnitř dotčeného prvku nový kontext formátování . Kontext formátování má vliv na způsob vykreslení vnitřních prvků, případně na chování vlastností aplikovaných na prvek. flow Hodnota flow zapíná formátování tokem . To je běžný způsob zobrazení, které je automaticky zapnuto hodnotami block, inline a inline-block. Jde o výchozí režim rozvržení v CSS. flow-root Vytvoří kontejner blokového kontextu a rozloží jeho obsah pomocí toku . Hodnota flow-root ale vždy generuje nový kontext formátování bloku pro svůj obsah, takže není například nutné mazat „floaty“ pomocí „clearfixu“. Na této hodnotě je zajímavé, že ji podporují všechny moderní prohlížeče. flex Zapíná formátovací kontext flexboxu. Ze stylovaného prvku udělá kontejner flexboxu a z přímých potomků flexboxové položky. grid Spouští formátovací kontext gridu. Ze stylovaného prvku udělá kontejner mřížky a z přímých potomků její položky. table Udělá z prvku tabulku. V tomto případě jsou zde ale dva „kontejnery“. display:table generuje kontejner tabulky, který vytvoří kontext formátování bloku a obsahuje dodatečně vygenerovaný rámeček tabulky, který vytvoří její kontext formátování. ruby Tohle je exotické a pro středoevropské prostředí nepotřebné. „Ruby anotace“ jsou krátké řady znaků umístěné nad nebo pod základním textem, které se používají ve východoasijské typografii jako vodítko pro výslovnost. Klidně na to zapomeňte. Připravil jsem dva vysvětlující CodePeny, na kterých si můžete otestovat to, co vidíte na obrázku. V prvním máme jednoduše a bez layoutu umístěné tři prvky v jednom rodiči. Zajímavější bude druhý CodePen. Všechny tři vnitřní prvky jsou „tekoucí“, floatové: .container p Výsledek vidíte na obrázku. Možnosti hodnot vnitřního zobrazení s vnitřními plovoucími prvky. Běžné tokové zobrazení floaty obalit neumí, potřebovali bychom už zmíněný „clearfix“. display:flow-root floaty obalí, vždy vytvoří nový kontext formátování bloku. Na display:flex a display:grid nemají floaty žádný vliv. Na vnitřní prvky v display:table floaty vliv mají, protože rodič je zde v běžném tokovém kontextu formátování bloku. Pojďme ještě projít několik specifických hodnot. Generování boxů se značkami: list-item Zápis display:list-item způsobí, že element vygeneruje pseudoprvek ::marker. Pokud není zadána žádná hodnota typu vnitřního zobrazení, výchozí bude tokové – jako display:flow. Pokud není zadána žádná hodnota typu vnějšího zobrazení, bude výchozí typ blokový – display:block. Náš kontejner díky tomu můžeme stylovat, jako by to byl prvek nebo : .container První příklad na následujícím obrázku ukazuje zobrazení typu list-item. Další typy zobrazení v CSS. Druhou a třetí hodnotu z obrázku probereme hned v následující části. Skrytí prvků: hodnoty none a contents Ke všem možným metodám ovlivnění vykreslování boxíků na obrazovku musíme přidat i metody nevykreslování. K tomu slouží následující dvě hodnoty vlastnosti display. none – element ani jeho potomci se na obrazovku prostě nevykreslí. contents – element se na obrazovku nevykreslí, ale jeho potomci ano. Zobrazení typu contents funguje tak, jako by prvek byl ve stromu DOM nahrazen jeho obsahem . Typy zobrazení pro vnitřní rozvržení: hodnoty table- a ruby- Modely zobrazení, které vynucují vnitřní rozvržení, jako je display:table a display:ruby, mají složitou strukturu s několika různými rolemi, jež mohou jejich potomci plnit. Jak je uvedeno výše, zápis display:table sice vytvoří kontejner tabulky, ale ten vytvoří kontext formátování bloku. Nedosáhneme tím tedy tabulkového zobrazení. K tomu bychom potřebovali další prvky, které reprezentují řádky a buňky tabulky se správnými hodnotami vlastnosti display . Podobné je to s display:ruby, jen ty vnitřní prvky jsou jiné. Hodnoty s více klíčovými slovy Tohle je nová věc, do specifikace přidaná v druhé polovině roku 2020 posledním prohlížečem, což zde byl Chrome, implementována v roce 2023. Vzpomínáte si, jak jsem psal o různých typech zobrazení – vnitřním a vnějším? Pokud ne, rychle proskenujte začátek tohoto textu nebo jeho nadpisy. Pak pochopíte, proč mi víceslovné hodnoty pro vlastnost display dávají smysl. Výše uvedené jednoslovné hodnoty lze totiž brát jako zkratky pro víceslovná označení vnitřního, vnějšího nebo specifického zobrazení. Zkratka Plný zápis Co se generuje none - nic contents - prvek vynechán, generují se potomci block block flow blokový box flow-root block flow-root blokový box, který vždy vytváří nový kontext formátování bloku inline inline flow inlinový box inline-block inline flow-root inlinový box, který vždy vytváří nový blokový kontext run-in run-in flow run-in box list-item block flow list-item blokový box s přídavnou značkou položky seznamu inline list-item inline flow list-item inlinový box s přídavnou značkou položky seznamu flex block flex blokový kontejner flexu inline-flex inline flex inlinový kontejner flexu grid block grid blokový kontejner mřížky inline-grid inline grid inlinový kontejner mřížky table block table blokový obalový rámeček tabulky inline-table inline table inlinový obalový rámeček tabulky Z tabulky je to asi zřejmé, ale pro jistotu ještě uvádím tři příklady: display:block označuje blokový prvek , který je umístěný v běžném toku dokumentu . display:inline-flex definuje kontejner flexboxu , který je umístěný v řádku . display:list-item vykreslí prvek seznamu , který je umístěný v běžném toku a zároveň je blokový . A to je k vlastnosti display vše, děkuji za pozornost. Text časem doplním o příklady z praxe a ještě rozvedu ten tabulkový layout. Pokud máte po ruce zajímavá využití novějších hodnot – jako flow-root, contents nebo run-in, budu rád, když je přidáte do komentářů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
