HTML za mřížemi aneb CSS grid
Dlouho jsem vzdoroval použít nějaký ten CSS framework. Říkal jsem si, že přece každá stránka (i když většina věcí je přinejmenším podobně dělaných) je ouplně jiná, takže tam nepůjde použít nějaké zobecňující řešení jako v případě aplikačních frameworků. Ale nakonec jsem se rozhoupal a u své poslední práce – e-shopu Shopaholic – zvolil použít některé z ještě nepoužitých technologií. Vlastně ne jen některé, všechny. Místo svých minimalistických „frameworků“ jsem sáhnul po Nette a místo docela osvědčeného PDO zase po dibi. Ale zpět k CSS gridu.
Překlad slova grid zní mříž, či mřížka. A přesně tím stylem se i ubírá kódování designu. Člověk si rozvrhne mřížku a do té si dosadí různé designové elementy.

Poté pomocí různých zanořování sloupců a řádků do sebe z toho vyleze požadovaný výsledek. Svým způsobem to může připomínat tabulku (sloupce, řádky…), takže někteří tvrdí, že CSS gridy jsou vlastně vracením se k předchozím generacím tvorby layoutu stránek. Ale zase, když si vzpomenu na svoje první stránky, které měly v té době moderní tabulkový layout, tak musím říct, že ono to fungovalo!
A o to právě jde. Sémantičtí maniaci vybili své síly pár roků zpět. Teď sice každý deklaruje, že jeho kódování je to nejsémantičtější vůbec a všem je jedno, jak je to ve skutečnosti. Ze slova „sémantika“ a odvozeného přídavného jména „sémantický“ se staly výrazy, které se běžně používají, nikdo neví, co to vlastně znamená, a neexistuje žádná jednotná definice. (Připomíná mi to MVC architekturu…)
Tvůrci gridů a vůbec ti, co je používají, tvrdí, že názvy CSS tříd jako row a column jsou sémantické, a tak se jich lidé nemusí bát. Souhlasím v tom, že se toho jeden bát opravdu nemusí.
Dalším problémem je, že gridy mohou do HTML zanášet značky navíc (podpůrné <div>y pro sloupce a řádky). V tom nevidím moc problém, protože stejně používám matrjošku, a tak mě nějaký ten bajtík a značka navíc nezabijí (ukamenujte mě).
Trochu větší oříšek je pozicování sloupů jiné než je jejich umístění v dokumentu. Pro věci, kde je tohle stěžejní bych asi grid nepoužil.
Co je vůbec na výběr? Nejznámější asi jsou Blueprint a 960.gs. Ale já jsem použil a hodlám nadále používat The 1KB CSS Grid. Jednoduché, přímočaré, doporučuji.
vydáno 16. 7. 2009, 10:00:00

