Rozvrhnutia štartovacej siete CSS Triky CSS

Toto je zbierka štartovacích šablón pre rozloženia a vzory pomocou CSS Grid. Myšlienkou je ukázať, čo je táto technika schopná urobiť, a poskytnúť východiskový bod, ktorý je možné opätovne použiť pre ďalšie projekty.

Pamätajte, že podpora prehľadávača pre Grid je dobrá, ale vyžaduje si záložné riešenia pre staršie prehliadače. To znamená, že ich priame kopírovanie a vkladanie nemusí byť pre niektoré prípady použitia vhodné.

Rozloženie svätého grálu

Klasické rozloženie troch stĺpcov, kde sú dva bočné pruhy a kontajner s kópiou tela vložené medzi hlavičku a pätu celej šírky.

Flexibilný svätý grál

Všetko sa nemení, pretože šírka výrezu sa mení pomocou nádoby s tekutým obsahom.

Prezrite si mriežku CSS mriežky - Svätý grál 2 od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Reagovať Svätý grál

Keď sa výrez zúži, veci sa naukladajú.

Pozri mriežku CSS pera: Rozloženie svätého grálu - reaguje Geoff Graham (@geoffgraham) na CodePen.

2-stĺpce s hlavičkou a pätou

Klasické rozloženie blogu, kde jeden stĺpec je pre príspevok a druhý pre bočný panel.

Flexibilné 2-stĺpce

Keď sa výrez zúži, rozloženie bude nerovnomerné, ale rozloženie zostane na svojom mieste.

Pozrite si mriežku CSS pera: Hlavička, päta s 2 stĺpcami (flexibilné) od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Reagujúce 2-stĺpce

Veci sa zhromažďujú na menších obrazovkách.

Pozri mriežku CSS pera: Hlavička, päta s 2 stĺpcami (responzívne) od Geoffa Grahama (@geoffgraham) na stránke CodePen.

Rovnomerne rozložené, prispôsobené podľa potreby

Prvky vtekajú do rozloženia a končia, keď ich už nie je viac.

Pozrite si rovnomerne distribuovanú mriežku CSS mriežky Pen, podľa potreby Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Článok s Breakout

Skvelý malý trik od Tylera Sticku, ktorý umožňuje prvku uniknúť zo siete. Rachel Andrew poskytuje dôkladné vysvetlenie toho, ako to umožňujú pomenované čiary mriežky.

Pozri mriežku CSS pera: Article with Breakout od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Základný kalendár

Ako možno čakáte, mriežka CSS funguje dobre pre mriežku kalendára.

Pozrite si mriežku CSS: Kalendár od Geoffa Grahama (@geoffgraham) na stránkach CodePen.

Monopolná rada

Jednoduchá rekreácia herného plánu. Jen Simmons má sladké demo doplnené štýlmi Monpoly.

Navštívte Pen CSS Grid: Monopoly Board od Geoffa Grahama (@geoffgraham) na CodePen.

Naši majstri frontendu Learning Partner

Potrebujete tréning front-endového vývoja?

Frontend Masters je najlepším miestom na jeho získanie. Majú kurzy všetkých najdôležitejších front-end technológií, od React po CSS, od Vue po D3 a ďalej pomocou Node.js a Full Stack.