Začínáme hraním s naším modulem příspěvku na blogu, který si pohrává s mezerami. Přidáme také malý barevný čtverec v levé horní části modulu, vizuální označení typu obsahu, o který se jedná.
Další změnou, kterou provedeme, je zmenšení některých vnějších mezer v užších velikostech obrazovky. Na širokoúhlých obrazovkách je obsah 80% široký (okraje šířky 10%), ale je lepší cítit se jako 90% na menších obrazovkách (okraje šířky 5%).
Přidáme malý přechod, když zasáhne tento mediální dotaz, což může být opravdu zábavný trik pro návrháře. Líbí se mi to v tomto videu, ale nakonec se to dostalo z designu. Může to být trhané, když je na stránce mnohem více obsahu a poněkud rušivé.
Změnili jsme náš síťový systém tak, aby měl bod zlomu při nejmenší velikosti. Je to super snadné, prostě přestaneme plovoucí sloupy a uděláme je width: 100%;Yay, že nepřemýšlíte o mřížkách! Na cestě bojujeme s některými problémy se specifičností.
Otevíráme skutečný simulátor iOS, abychom vyzkoušeli mřížku fungující na „skutečném“ mobilním zařízení. Trochu se snažíme najít správnou metaznačku, ale nakonec sehneme tu správnou z CSS-Tricks.com. Funguje to! Ale samozřejmě máme nějaké problémy s polohováním, které budeme muset vyřešit. Pro záznam je tato metaznačka:
Tinkujeme tinker tinker s roztečí a velikostí, dokud věci nevypadají dobře. Na konci vypadají věci docela dobře reagující!