User:Dannyboy601/Sandbox: Difference between revisions

All of my updated versions of these template use the CSS Grid Layout module! Try making your browser window really narrow and seeing what happens. The only problem with them is that they don't use wikicode. Like, at all. Someone who has no experience with HTML and CSS would have no idea how to edit them. However, if they were to be mainspaced, they ideally wouldn't need to be updated any time soon, so this hopefully wouldn't be too much of an issue.

====Old====

<div class="roundy" style="display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{kanto color}}; padding: 4px; background: #{{kanto color light}}; color: #{{kanto color dark}}; text-align: center; font-size: 90%;">

<div style="grid-column: span 4;">'''{{color2|{{kanto color dark}}|Gym|Gyms}} and {{color2|{{kanto color dark}}|Gym Leader|Gym Leaders}} of {{color2|{{kanto color dark}}|Kanto}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{rock color dark}}; background: #{{rock color}}">[[File:Boulder Badge.png|24px|Boulder Badge]]<div>{{color2|{{rock color dark}}|Pewter Gym}}</div>[[File:Boulder Badge.png|24px|Boulder Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{rock color light}}">[[File:Brock OD.png|Brock]]<br>{{color2|{{rock color dark}}|Brock}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{water color dark}}; background: #{{water color}}">[[File:Cascade Badge.png|24px|Cascade Badge]]<div>{{color2|{{water color dark}}|Cerulean Gym}}</div>[[File:Cascade Badge.png|24px|Cascade Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{water color light}}">[[File:Misty OD.png|Misty]]<br>{{color2|{{water color dark}}|Misty}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{electric color dark}}; background: #{{electric color}}">[[File:Thunder Badge.png|24px|Thunder Badge]]<div>{{color2|{{electric color dark}}|Vermilion Gym}}</div>[[File:Thunder Badge.png|24px|Thunder Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{electric color light}}">[[File:Lt Surge OD.png|Lt. Surge]]<br>{{color2|{{electric color dark}}|Lt. Surge}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{grass color dark}}; background: #{{grass color}}">[[File:Rainbow Badge.png|24px|Rainbow Badge]]<div>{{color2|{{grass color dark}}|Celadon Gym}}</div>[[File:Rainbow Badge.png|24px|Rainbow Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{grass color light}}">[[File:Erika OD.png|Erika]]<br>{{color2|{{grass color dark}}|Erika}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{poison color dark}}; background: #{{poison color}}">[[File:Soul Badge.png|24px|Soul Badge]]<div style="grid-column: span 2;">{{color2|{{poison color dark}}|Fuchsia Gym}}</div>[[File:Soul Badge.png|24px|Soul Badge]]<div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{poison color light}}">[[File:Koga OD.png|Koga]]<br>{{color2|{{poison color dark}}|Koga}}</div><div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{poison color light}}">[[File:Janine OD.png|Janine]]<br>{{color2|{{poison color dark}}|Janine}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{psychic color dark}}; background: #{{psychic color}}">[[File:Marsh Badge.png|24px|Marsh Badge]]<div>{{color2|{{psychic color dark}}|Saffron Gym}}</div>[[File:Marsh Badge.png|24px|Marsh Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{psychic color light}}">[[File:Sabrina OD.png|Sabrina]]<br>{{color2|{{psychic color dark}}|Sabrina}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{fire color dark}}; background: #{{fire color}}">[[File:Volcano Badge.png|24px|Volcano Badge]]<div>{{color2|{{fire color dark}}|Cinnabar Gym}}</div>[[File:Volcano Badge.png|24px|Volcano Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{fire color light}}">[[File:Blaine OD.png|Blaine]]<br>{{color2|{{fire color dark}}|Blaine}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #40826D; background: #6FA090">[[File:Earth Badge.png|24px|Earth Badge]]<div style="grid-column: span 2;">{{color2|40826D|Viridian Gym}}</div>[[File:Earth Badge.png|24px|Earth Badge]]<div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{ground color light}}">[[File:Giovanni OD.png|Giovanni]]<br>{{color2|{{ground color dark}}|Giovanni}}</div><div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{blue color light}}">[[File:Blue OD.png|Blue]]<br>{{color2|{{blue color dark}}|Blue (game)|Blue}}</div></div>

</center>

<div class="roundy" style="width: 700px; max-width: 100%; display: grid; grid-template-rows: auto 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{johto color dark}}; padding: 4px; background: #{{johto color}}; color: #{{johto color light}}; text-align: center;">

<div>'''{{color2|{{johto color light}}|Gym|Gyms}} and {{color2|{{johto color light}}|Gym Leader|Gym Leaders}} of {{color2|{{johto color light}}|Johto}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); grid-template-rows: 1fr 1fr; grid-gap: 4px; place-content: space-evenly; padding: 4px; background: #{{johto color light}}; font-size: 90%;">

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{flying color dark}}; padding: 4px; background: #{{flying color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{flying color light}}">[[File:VSFalkner.png|link=Falkner]]<br>{{color2|{{flying color dark}}|Falkner}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{bug color dark}}; padding: 4px; background: #{{bug color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{bug color light}}">[[File:VSBugsy.png|link=Bugsy]]<br>{{color2|{{bug color dark}}|Bugsy}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{normal color dark}}; padding: 4px; background: #{{normal color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{normal color light}}">[[File:VSWhitney.png|link=Whitney]]<br>{{color2|{{normal color dark}}|Whitney}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{ghost color dark}}; padding: 4px; background: #{{ghost color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{ghost color light}}">[[File:VSMorty.png|link=Morty]]<br>{{color2|{{ghost color dark}}|Morty}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{fighting color dark}}; padding: 4px; background: #{{fighting color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{fighting color light}}">[[File:VSChuck.png|link=Chuck]]<br>{{color2|{{fighting color dark}}|Chuck}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{steel color dark}}; padding: 4px; background: #{{steel color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{steel color light}}">[[File:VSJasmine.png|link=Jasmine]]<br>{{color2|{{steel color dark}}|Jasmine}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{ice color dark}}; padding: 4px; background: #{{ice color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{ice color light}}">[[File:VSPryce.png|link=Pryce]]<br>{{color2|{{ice color dark}}|Pryce}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{dragon color dark}}; padding: 4px; background: #{{dragon color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{dragon color light}}">[[File:VSClair.png|link=Clair]]<br>{{color2|{{dragon color dark}}|Clair}}</div>

<div class="roundy" style="display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: auto 1fr 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{hoenn color}}; padding: 4px; background: #{{hoenn color light}}; color: #{{hoenn color dark}}; text-align: center; font-size: 90%;">

<div style="grid-column: span 4;">'''{{color2|{{hoenn color dark}}|Gym|Gyms}} and {{color2|{{hoenn color dark}}|Gym Leader|Gym Leaders}} of {{color2|{{hoenn color dark}}|Hoenn}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{rock color dark}}; background: #{{rock color}}">[[File:Stone Badge.png|24px|Stone Badge]]<div>{{color2|{{rock color dark}}|Rustboro Gym}}</div>[[File:Stone Badge.png|24px|Stone Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{rock color light}}">[[File:Roxanne OD.png|Roxanne]]<br>{{color2|{{rock color dark}}|Roxanne}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{fighting color dark}}; background: #{{fighting color}}">[[File:Knuckle Badge.png|24px|Knuckle Badge]]<div>{{color2|{{fighting color dark}}|Dewford Gym}}</div>[[File:Knuckle Badge.png|24px|Knuckle Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{fighting color light}}">[[File:Brawly OD.png|Brawly]]<br>{{color2|{{fighting color dark}}|Brawly}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{electric color dark}}; background: #{{electric color}}">[[File:Dynamo Badge.png|24px|Dynamo Badge]]<div>{{color2|{{electric color dark}}|Mauville Gym}}</div>[[File:Dynamo Badge.png|24px|Dynamo Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{electric color light}}">[[File:Wattson OD.png|Wattson]]<br>{{color2|{{electric color dark}}|Wattson}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{fire color dark}}; background: #{{fire color}}">[[File:Heat Badge.png|24px|Heat Badge]]<div>{{color2|{{fire color dark}}|Lavaridge Gym}}</div>[[File:Heat Badge.png|24px|Heat Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{fire color light}}">[[File:Flannery OD.png|Flannery]]<br>{{color2|{{fire color dark}}|Flannery}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{normal color dark}}; background: #{{normal color}}">[[File:Balance Badge.png|24px|Balance Badge]]<div>{{color2|{{normal color dark}}|Petalburg Gym}}</div>[[File:Balance Badge.png|24px|Balance Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{normal color light}}">[[File:Norman OD.png|Norman]]<br>{{color2|{{normal color dark}}|Norman}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{flying color dark}}; background: #{{flying color}}">[[File:Feather Badge.png|24px|Feather Badge]]<div>{{color2|{{flying color dark}}|Fortree Gym}}</div>[[File:Feather Badge.png|24px|Feather Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{flying color light}}">[[File:Winona OD.png|Winona]]<br>{{color2|{{flying color dark}}|Winona}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{psychic color dark}}; background: #{{psychic color}}">[[File:Mind Badge.png|24px|Mind Badge]]<div>{{color2|{{psychic color dark}}|Mossdeep Gym}}</div>[[File:Mind Badge.png|24px|Mind Badge]]<div class="roundy" style="grid-column: span 3; place-self: stretch; margin: 4px; background: #{{psychic color light}}">[[File:Tate OD.png|Tate]][[File:Liza OD.png|Liza]]<br>{{color2|{{psychic color dark}}|Tate and Liza}}</div></div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr auto; place-items: center; border: 2px solid #{{water color dark}}; background: #{{water color}}">[[File:Rain Badge.png|24px|Rain Badge]]<div style="grid-column: span 2;">{{color2|{{water color dark}}|Sootopolis Gym}}</div>[[File:Rain Badge.png|24px|Rain Badge]]<div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{water color light}}">[[File:Wallace OD.png|Wallace]]<br>{{color2|{{water color dark}}|Wallace}}</div><div class="roundy" style="grid-column: span 2; place-self: stretch; margin: 4px; background: #{{water color light}}">[[File:Juan OD.png|Juan]]<br>{{color2|{{water color dark}}|Juan}}</div></div>

<div class="roundy" style="display: inline-grid; grid-template-rows: auto 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{sinnoh color dark}}; padding: 4px; background: #{{sinnoh color}}; color: #{{sinnoh color light}};">

<div>'''{{color2|{{sinnoh color light}}|Gym|Gyms}} and {{color2|{{sinnoh color light}}|Gym Leader|Gym Leaders}} of {{color2|{{sinnoh color light}}|Sinnoh}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 4px; padding: 4px; background: #{{sinnoh color light}}; font-size: 90%;">

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{rock color dark}}; padding: 4px; background: #{{rock color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{rock color light}}">[[File:VSRoark.png|link=Roark]]<br>{{color2|{{rock color dark}}|Roark}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{grass color dark}}; padding: 4px; background: #{{grass color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{grass color light}}">[[File:VSGardenia.png|link=Gardenia]]<br>{{color2|{{grass color dark}}|Gardenia}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{fighting color dark}}; padding: 4px; background: #{{fighting color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{fighting color light}}">[[File:VSMaylene.png|link=Maylene]]<br>{{color2|{{fighting color dark}}|Maylene}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{water color dark}}; padding: 4px; background: #{{water color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{water color light}}">[[File:VSCrasher Wake.png|link=Crasher Wake]]<br>{{color2|{{water color dark}}|Crasher Wake}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{ghost color dark}}; padding: 4px; background: #{{ghost color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{ghost color light}}">[[File:VSFantina.png|link=Fantina]]<br>{{color2|{{ghost color dark}}|Fantina}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{steel color dark}}; padding: 4px; background: #{{steel color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{steel color light}}">[[File:VSByron.png|link=Byron]]<br>{{color2|{{steel color dark}}|Byron}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{ice color dark}}; padding: 4px; background: #{{ice color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{ice color light}}">[[File:VSCandice.png|link=Candice]]<br>{{color2|{{ice color dark}}|Candice}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{electric color dark}}; padding: 4px; background: #{{electric color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{electric color light}}">[[File:VSVolkner.png|link=Volkner]]<br>{{color2|{{electric color dark}}|Volkner}}</div>

</div>

<div class="roundy" style="display: inline-grid; grid-template-rows: auto 1fr 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{sinnoh color dark}}; padding: 4px; background: #{{sinnoh color}}; color: #{{sinnoh color dark}};">

<div>'''{{color2|{{sinnoh color light}}|Sinnoh League}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr; grid-gap: 4px; padding: 4px; background: #{{sinnoh color light}}; font-size: 90%;">

<div style="grid-column: span 4;">'''{{color2|{{sinnoh color dark}}|Elite Four}}'''</div>

<div class="roundy" style="border: 2px solid #{{bug color dark}}; padding: 4px; background: #{{bug color}}">

<div class="roundy" style="padding: 4px; background: #{{bug color light}}">[[File:VSAaron.png|link=Aaron (Elite Four)]]<br>{{color2|{{bug color dark}}|Aaron (Elite Four)|Aaron}}</div>

<div class="roundy" style="border: 2px solid #{{ground color dark}}; padding: 4px; background: #{{ground color}}">

<div class="roundy" style="padding: 4px; background: #{{ground color light}}">[[File:VSBertha.png|link=Bertha]]<br>{{color2|{{ground color dark}}|Bertha}}</div>

<div class="roundy" style="border: 2px solid #{{fire color dark}}; padding: 4px; background: #{{fire color}}">

<div class="roundy" style="padding: 4px; background: #{{fire color light}}">[[File:VSFlint.png|link=Flint]]<br>{{color2|{{fire color dark}}|Flint}}</div>

<div class="roundy" style="border: 2px solid #{{psychic color dark}}; padding: 4px; background: #{{psychic color}}">

<div class="roundy" style="padding: 4px; background: #{{psychic color light}}">[[File:VSLucian.png|link=Lucian]]<br>{{color2|{{psychic color dark}}|Lucian}}</div>

<div>'''{{color2|{{sinnoh color dark}}|Pokémon Champion|Champion}}'''</div>

<div class="roundy" style="border: 2px solid #{{cynthia color dark}}; padding: 4px; background: #{{cynthia color}}">

<div class="roundy" style="padding: 4px; background: #{{cynthia color light}}">[[File:VSCynthia.png|link=Cynthia]]<br>{{color2|{{cynthia color dark}}|Cynthia}}</div>

</div>

<div class="roundy" style="display: inline-grid; grid-template-rows: auto 1fr 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{unova color dark}}; padding: 4px; background: #{{unova color}}; color: #{{unova color dark}};">

<div>'''{{color2|{{unova color light}}|Unova League}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: auto 1fr; grid-gap: 4px; padding: 4px; background: #{{unova color light}}; font-size: 90%;">

<div style="grid-column: span 4;">'''{{color2|{{unova color dark}}|Elite Four}}'''</div>

<div class="roundy" style="border: 2px solid #{{ghost color dark}}; padding: 4px; background: #{{ghost color}}">

<div class="roundy" style="padding: 4px; background: #{{ghost color light}}">[[File:VSShauntal.png|link=Shauntal]]<br>{{color2|{{ghost color dark}}|Shauntal}}</div>

<div class="roundy" style="border: 2px solid #{{dark color dark}}; padding: 4px; background: #{{dark color}}">

<div class="roundy" style="padding: 4px; background: #{{dark color light}}">[[File:VSGrimsley.png|link=Grimsley]]<br>{{color2|{{dark color dark}}|Grimsley}}</div>

<div class="roundy" style="border: 2px solid #{{fighting color dark}}; padding: 4px; background: #{{fighting color}}">

<div class="roundy" style="padding: 4px; background: #{{fighting color light}}">[[File:VSMarshal.png|link=Marshal]]<br>{{color2|{{fighting color dark}}|Marshal}}</div>

<div class="roundy" style="border: 2px solid #{{psychic color dark}}; padding: 4px; background: #{{psychic color}}">

<div class="roundy" style="padding: 4px; background: #{{psychic color light}}">[[File:VSCaitlin.png|link=Caitlin]]<br>{{color2|{{psychic color dark}}|Caitlin}}</div>

<div class="roundy" style="display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; grid-gap: 4px; place-content: space-evenly; padding: 4px; background: #{{unova color light}}; font-size: 90%;">

<div style="grid-column: span 2;">'''{{color2|{{unova color dark}}|Pokémon Champion|Champion}}'''</div>

<div class="roundy" style="padding: 4px; background: #{{alder color light}}">[[File:VSAlder.png|link=Alder]]<br>{{color2|{{alder color dark}}|Alder}}</div>

<div class="roundy" style="padding: 4px; background: #{{dragon color light}}">[[File:VSIris cropped.png|link=Iris]]<br>{{color2|{{dragon color dark}}|Iris}}</div>

<div class="roundy" style="display: inline-grid; grid-template-rows: auto 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{kalos color dark}}; padding: 4px; background: #{{kalos color}}; color: #{{kalos color light}};">

<div>'''{{color2|{{kalos color light}}|Gym|Gyms}} and {{color2|{{kalos color light}}|Gym Leader|Gym Leaders}} of {{color2|{{kalos color light}}|Kalos}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 4px; padding: 4px; background: #{{kalos color light}}; font-size: 90%;">

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{bug color dark}}; padding: 4px; background: #{{bug color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{bug color light}}">[[File:XY Viola Icon.png|link=Viola]]<br>{{color2|{{bug color dark}}|Viola}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{rock color dark}}; padding: 4px; background: #{{rock color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{rock color light}}">[[File:XY Grant Icon.png|link=Grant]]<br>{{color2|{{rock color dark}}|Grant}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{fighting color dark}}; padding: 4px; background: #{{fighting color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{fighting color light}}">[[File:XY Korrina Icon.png|link=Korrina]]<br>{{color2|{{fighting color dark}}|Korrina}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{grass color dark}}; padding: 4px; background: #{{grass color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{grass color light}}">[[File:XY Ramos Icon.png|link=Ramos]]<br>{{color2|{{grass color dark}}|Ramos}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{electric color dark}}; padding: 4px; background: #{{electric color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{electric color light}}">[[File:XY Clemont Icon.png|link=Clemont]]<br>{{color2|{{electric color dark}}|Clemont}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{fairy color dark}}; padding: 4px; background: #{{fairy color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{fairy color light}}">[[File:XY Valerie Icon.png|link=Valerie]]<br>{{color2|{{fairy color dark}}|Valerie}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{psychic color dark}}; padding: 4px; background: #{{psychic color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{psychic color light}}">[[File:XY Olympia Icon.png|link=Olympia]]<br>{{color2|{{psychic color dark}}|Olympia}}</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr min-content 1fr; grid-template-rows: 1fr auto; grid-gap: 4px; place-items: center; border: 2px solid #{{ice color dark}}; padding: 4px; background: #{{ice color}}">

<div class="roundy" style="grid-column: span 3; place-self: stretch; padding: 4px; background: #{{ice color light}}">[[File:XY Wulfric Icon.png|link=Wulfric]]<br>{{color2|{{ice color dark}}|Wulfric}}</div>

</div>

<div class="roundy" style="display: inline-grid; grid-template-rows: auto 1fr 1fr; grid-gap: 4px; margin: auto; border: 4px solid #{{kalos color dark}}; padding: 4px; background: #{{kalos color}}; color: #{{kalos color dark}};">

<div>'''{{color2|{{kalos color light}}|Kalos League}}'''</div>

<div class="roundy" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr; grid-gap: 4px; padding: 4px; background: #{{kalos color light}}; font-size: 90%;">

<div style="grid-column: span 4;">'''{{color2|{{kalos color dark}}|Elite Four}}'''</div>

<div class="roundy" style="border: 2px solid #{{fire color dark}}; padding: 4px; background: #{{fire color}}">

<div class="roundy" style="padding: 4px; background: #{{fire color light}}">[[File:XY Malva Icon.png|link=Malva]]<br>{{color2|{{fire color dark}}|Malva}}</div>

<div class="roundy" style="border: 2px solid #{{water color dark}}; padding: 4px; background: #{{water color}}">

<div class="roundy" style="padding: 4px; background: #{{water color light}}">[[File:XY Siebold Icon.png|link=Siebold]]<br>{{color2|{{water color dark}}|Siebold}}</div>

<div class="roundy" style="border: 2px solid #{{steel color dark}}; padding: 4px; background: #{{steel color}}">

<div class="roundy" style="padding: 4px; background: #{{steel color light}}">[[File:XY Wikstrom Icon.png|link=Wikstrom]]<br>{{color2|{{steel color dark}}|Wikstrom}}</div>

<div class="roundy" style="border: 2px solid #{{dragon color dark}}; padding: 4px; background: #{{dragon color}}">

<div class="roundy" style="padding: 4px; background: #{{dragon color light}}">[[File:XY Drasna Icon.png|link=Drasna]]<br>{{color2|{{dragon color dark}}|Drasna}}</div>