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áluKlasické 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álVš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álKeď 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ätouKlasické rozloženie blogu, kde jeden stĺpec je pre príspevok a druhý pre bočný panel.
Flexibilné 2-stĺpceKeď 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ĺpceVeci 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 potrebyPrvky 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 BreakoutSkvelý 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árAko 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á radaJednoduchá 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.