Toto je kolekce startovacích šablon pro rozvržení a vzory pomocí CSS Grid. Myšlenkou je předvést, co je tato technika schopna udělat, a poskytnout výchozí bod, který lze znovu použít pro jiné projekty.
Nezapomeňte, že podpora prohlížeče pro Grid je dobrá, ale vyžaduje záložní řešení pro starší prohlížeče. To znamená, že jejich přímé kopírování a vkládání nemusí být pro některé případy použití vhodné.
Rozložení svatého gráluKlasické třísloupcové rozložení, kde jsou dva postranní pruhy a kontejner obsahující kopii těla vloženy mezi záhlaví a zápatí celé šířky.
Flexibilní svatý grálVše se nemění, protože se šířka výřezu mění pomocí kontejneru s tekutým obsahem.
Podívejte se na Pen CSS Grid - Holy Grail 2 od Geoffa Grahama (@geoffgraham) na CodePen.
Citlivý svatý grálJakmile se výřez zúží, věci se skládají.
Podívejte se na Pen CSS Grid: Layout Holy Grail - Responsive by Geoff Graham (@geoffgraham) na CodePen.
2-sloupce s hlavičkou a zápatíKlasické rozložení blogu, kde jeden sloupec je pro příspěvek a druhý pro postranní panel.
Flexibilní 2-sloupkyRozložení se roztáhne, když se výřez zúží, ale rozložení zůstane na svém místě.
Podívejte se na Pen CSS Grid: Header, Footer with 2-Column (Flexible) od Geoffa Grahama (@geoffgraham) na CodePen.
Reagující 2-sloupceVěci se skládají na menších obrazovkách.
Podívejte se na Pen CSS Grid: Header, Footer with 2-Column (Responsive) od Geoffa Grahama (@geoffgraham) na CodePen.
Rovnoměrně distribuováno, přizpůsobeno podle potřebyPrvky proudí do rozvržení a končí, když už jich není.
Podívejte se na rovnoměrně distribuovanou mřížku CSS pera, tolik, kolik potřebuje Geoff Graham (@geoffgraham) na CodePen.
Článek s BreakoutSkvělý malý trik od Tylera Sticky, který umožňuje prvku vymanit se z mřížky. Rachel Andrew poskytuje důkladné vysvětlení toho, jak to umožňují pojmenované čáry mřížky.
Podívejte se na Pen CSS Grid: Article with Breakout od Geoffa Grahama (@geoffgraham) na CodePen.
Základní kalendářJak můžete očekávat, CSS Grid funguje dobře pro mřížku kalendáře.
Podívejte se na Pen CSS Grid: Calendar od Geoffa Grahama (@geoffgraham) na CodePen.
Monopolní radaJednoduchá rekreace herního plánu. Jen Simmons má sladké demo doplněné o styly Monpoly.
Podívejte se na Pen CSS Grid: Monopoly Board od Geoffa Grahama (@geoffgraham) na CodePen.
Naši
učitelé Frontend Masters pro učení
Potřebujete školení front-endového vývoje?
Frontend Masters je tím nejlepším místem pro jeho získání. Mají kurzy všech nejdůležitějších front-end technologií, od React po CSS, od Vue po D3 a dále s Node.js a Full Stack.