CSS Grid Starter Layouts Triky CSS

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álu

Klasické 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ál

Vš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ál

Jakmile 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-sloupky

Rozlož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-sloupce

Vě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řeby

Prvky 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 Breakout

Skvě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í rada

Jednoduchá 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.