View source for User:Lakelimbo/Grids

As you might already know, Bulbapedia has a very poor UX on mobile, caused by the way the templates are made and aligned. On this page I will '''try''' to see if I can make some things responsive. I will add more things to this page soon.

<div class="warningbox">
Note that the Mobile view (MinervaNeue) has a ''lot'' of workarounds in the CSS that sometimes break certain things, so if you want to visualize better the effect of the responsive grids, I recommend using the Vector skin and just resize the page to be more vertical, delete the <code>#mw-panel</code> and add <code>margin-left: 0!important</code> to <code>.mw-body</code>.
</div>

== Side-by-side elements ==
=== [[Pseudo-legendary Pokémon]] ===
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); gap: .5rem; place-content: center">
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{kanto color dark}}; font-size:85%; border: 5px solid #{{kanto color}}"
|-
! style="width:80px; background:#{{kanto color light}}; {{roundytop|5px}}" colspan="2" | [[File:149Dragonite.png|96px]]<br>'''{{pcolor|Dragonite|{{kanto color dark}}}}'''<br>
|-
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{flying color}}" | {{color2|FFF|Flying (type)|Flying}}
|- style="background: #{{kanto color light}}"
| {{MSP|148|Dragonair}}
| {{pcolor|Dragonair|{{kanto color dark}}}}
|- style="background: #{{kanto color light}}"
| colspan="2" style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
|- style="background: #{{kanto color light}}"
| {{MSP|147|Dratini}}
| {{pcolor|Dratini|{{kanto color dark}}}}
|-
| colspan="2" style="background:#{{dragon color}}; {{roundybottom|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{johto color dark}}; font-size:85%; border: 5px solid #{{johto color}}"
|-
! style="width:80px; background:#{{johto color light}}; {{roundytop|5px}}" colspan="2" | [[File:248Tyranitar.png|96px]]<br>'''{{pcolor|Tyranitar|{{johto color dark}}}}'''<br>
|-
| style="background:#{{rock color}}" | {{color2|FFF|Rock (type)|Rock}}
| style="background:#{{dark color}}" | {{color2|FFF|Dark (type)|Dark}}
|- style="background: #{{johto color light}}"
| {{MSP|247|Pupitar}}
| {{pcolor|Pupitar|{{johto color dark}}}}
|- style="background: #{{johto color light}}"
| style="background:#{{rock color}}" | {{color2|FFF|Rock (type)|Rock}}
| style="background:#{{ground color}}" | {{color2|FFF|Ground (type)|Ground}}
|- style="background: #{{johto color light}}"
| {{MSP|246|Larvitar}}
| {{pcolor|Larvitar|{{johto color dark}}}}
|-
| style="background:#{{rock color}}; {{roundybl|5px}}" | {{color2|FFF|Rock (type)|Rock}}
| style="background:#{{ground color}}; {{roundybr|5px}}" | {{color2|FFF|Ground (type)|Ground}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{hoenn color dark}}; font-size:85%; border: 5px solid #{{hoenn color}}"
|-
! style="width:80px; background:#{{hoenn color light}}; {{roundytl|5px}}" colspan="2" | [[File:373Salamence.png|96px]]<br>'''{{pcolor|Salamence|{{hoenn color dark}}}}'''<br>
! style="width:80px; background:#{{hoenn color light}}; {{roundytr|5px}}" colspan="2" | [[File:376Metagross.png|96px]]<br>'''{{pcolor|Metagross|{{hoenn color dark}}}}'''
|-
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{flying color}}" | {{color2|FFF|Flying (type)|Flying}}
| style="background:#{{steel color}}" | {{color2|FFF|Steel (type)|Steel}}
| style="background:#{{psychic color}}" | {{color2|FFF|Psychic (type)|Psychic}}
|- style="background: #{{hoenn color light}}"
| {{MSP|372|Shelgon}}
| {{pcolor|Shelgon|{{hoenn color dark}}}}
| {{MSP|375|Metang}}
| {{pcolor|Metang|{{hoenn color dark}}}}
|-
| colspan="2" style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{steel color}}" | {{color2|FFF|Steel (type)|Steel}}
| style="background:#{{psychic color}}" | {{color2|FFF|Psychic (type)|Psychic}}
|- style="background: #{{hoenn color light}}"
| {{MSP|371|Bagon}}
| {{pcolor|Bagon|{{hoenn color dark}}}}
| {{MSP|374|Beldum}}
| {{pcolor|Beldum|{{hoenn color dark}}}}
|-
| colspan="2" style="background:#{{dragon color}}; {{roundybl|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{steel color}}" | {{color2|FFF|Steel (type)|Steel}}
| style="background:#{{psychic color}}; {{roundybr|5px}}" | {{color2|FFF|Psychic (type)|Psychic}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{sinnoh color dark}}; font-size:85%; border: 5px solid #{{sinnoh color}}"
|-
! style="width:80px; background:#{{sinnoh color light}}; {{roundytop|5px}}" colspan="2" | [[File:445Garchomp.png|96px]]<br>'''{{pcolor|Garchomp|{{sinnoh color dark}}}}'''<br>
|-
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ground color}}" | {{color2|FFF|Ground (type)|Ground}}
|- style="background: #{{sinnoh color light}}"
| {{MSP|444|Gabite}}
| {{pcolor|Gabite|{{sinnoh color dark}}}}
|- style="background: #{{sinnoh color light}}"
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ground color}}" | {{color2|FFF|Ground (type)|Ground}}
|- style="background: #{{sinnoh color light}}"
| {{MSP|443|Gible}}
| {{pcolor|Gible|{{sinnoh color dark}}}}
|-
| style="background:#{{dragon color}}; {{roundybl|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ground color}}; {{roundybr|5px}}" | {{color2|FFF|Ground (type)|Ground}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{unova color dark}}; font-size:85%; border: 5px solid #{{unova color}}"
|-
! style="width:80px; background:#{{unova color light}}; {{roundytop|5px}}" colspan="2" | [[File:635Hydreigon.png|96px]]<br>'''{{pcolor|Hydreigon|{{unova color dark}}}}'''<br>
|-
| style="background:#{{dark color}}" | {{color2|FFF|Dark (type)|Dark}}
| style="background:#{{Dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
|- style="background: #{{unova color light}}"
| {{MSP|634|Zweilous}}
| {{pcolor|Zweilous|{{unova color dark}}}}
|- style="background: #{{unova color light}}"
| style="background:#{{dark color}}" | {{color2|FFF|Dark (type)|Dark}}
| style="background:#{{Dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
|- style="background: #{{unova color light}}"
| {{MSP|633|Deino}}
| {{pcolor|Deino|{{unova color dark}}}}
|-
| style="background:#{{dark color}}; {{roundybl|5px}}" | {{color2|FFF|Dark (type)|Dark}}
| style="background:#{{dragon color}}; {{roundybr|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{kalos color dark}}; font-size:85%; border: 5px solid #{{kalos color}}"
|-
! style="width:80px; background:#{{kalos color light}}; {{roundytop|5px}}" colspan="2" | [[File:706Goodra.png|96px]]<br>'''{{pcolor|Goodra|{{kalos color dark}}}}'''<br>
|-
| colspan="2" style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
|- style="background: #{{kalos color light}}"
| {{MSP|705|Sliggoo}}
| {{pcolor|Sliggoo|{{kalos color dark}}}}
|- style="background: #{{kalos color light}}"
| colspan="2" style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
|- style="background: #{{kalos color light}}"
| {{MSP|704|Goomy}}
| {{pcolor|Goomy|{{kalos color dark}}}}
|-
| colspan="2" style="background:#{{dragon color}}; {{roundybottom|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{alola color dark}}; font-size:85%; border: 5px solid #{{alola color}}"
|-
! style="width:80px; background:#{{alola color light}}; {{roundytop|5px}}" colspan="2" | [[File:784Kommo-o.png|96px]]<br>'''{{pcolor|Kommo-o|{{alola color dark}}}}'''<br>
|-
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{fighting color}}" | {{color2|FFF|Fighting (type)|Fighting}}
|- style="background: #{{alola color light}}"
| {{MSP|783|Hakamo-o}}
| {{pcolor|Hakamo-o|{{alola color dark}}}}
|- style="background: #{{alola color light}}"
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{fighting color}}" | {{color2|FFF|Fighting (type)|Fighting}}
|- style="background: #{{alola color light}}"
| {{MSP|782|Jangmo-o}}
| {{pcolor|Jangmo-o|{{alola color dark}}}}
|-
| colspan="2" style="background:#{{dragon color}}; {{roundybottom|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
|}
</div>
<div>
{| class="roundy" style="width: 100%; text-align:center; background: #{{galar color dark}}; font-size:85%; border: 5px solid #{{galar color}}"
|-
! style="width:80px; background:#{{galar color light}}; {{roundytop|5px}}" colspan="2" | [[File:887Dragapult.png|96px]]<br>'''{{pcolor|Dragapult|{{galar color dark}}}}'''<br>
|-
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ghost color}}" | {{color2|FFF|Ghost (type)|Ghost}}
|- style="background: #{{galar color light}}"
| {{MSP|886|Drakloak}}
| {{pcolor|Drakloak|{{galar color dark}}}}
|- style="background: #{{galar color light}}"
| style="background:#{{dragon color}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ghost color}}" | {{color2|FFF|Ghost (type)|Ghost}}
|- style="background: #{{galar color light}}"
| {{MSP|885|Dreepy}}
| {{pcolor|Dreepy|{{galar color dark}}}}
|-
| style="background:#{{dragon color}}; {{roundybl|5px}}" | {{color2|FFF|Dragon (type)|Dragon}}
| style="background:#{{ghost color}}; {{roundybr|5px}}" | {{color2|FFF|Ghost (type)|Ghost}}
|}
</div>
</div>


<div class="toccolours mw-collapsible mw-collapsed">
'''"Tutorial"'''
<div class="mw-collapsible-content">
Instead of a table inside a table, take each Pokémon panel and wrap around a <code>div</code>, then wrap all the <code>div</code> with another <code>div</code>. In the "master" <code>div</code>, insert the following CSS:

<pre>
{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, auto));
   gap: .5rem;
   place-content: center
}
</pre>

Also, remove the <code>margin: auto</code> from the Pokémon tables, <code>place-content: center</code> takes care of that automatically. IMO, it's also preferable to give each table <code>width: 100%</code>.

</div>
</div>

=== [[Red Gyarados#Starting movesets|Red Gyarados]] ===
Using this page as an example with the same previous method.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); justify-items: center; place-content: center; gap: 0.25rem">
<div>
<div style="text-align: center">'''{{game2|Gold|Silver|Crystal}}'''</div>
{{Pokémon/2|game=Crystal|ndex=130|pokemon=Gyarados|gender=male|spritegender=shiny
|level=30|type1=Water|type2=Flying
|move1=Thrash|move1type=Normal
|move2=Bite|move2type=Dark
|move3=Dragon Rage|move3type=Dragon
|move4=Leer|move4type=Normal}}
</div>
<div>
<div style="text-align: center">'''{{game|HeartGold and SoulSilver|s}}'''</div>
{{Pokémon/4|game=HeartGold|ndex=130|pokemon=Gyarados|gender=both|spritegender={{#switch: {{#expr: {{#time: U}} mod 2}}|0=fe}}male shiny|ability=Intimidate
|level=30|type1=Water|type2=Flying
|move1=Bite|move1type=Dark|move1cat=Physical
|move2=Dragon Rage|move2type=Dragon|move2cat=Special
|move3=Leer|move3type=Normal|move3cat=Status
|move4=Twister|move4type=Dragon|move4cat=Special}}
</div>
</div>

=== Multiple panels ===
This one uses multiple tables because ''[[Template:ActivePoké]]'' and ''[[Template:InactivePoké]]'' are just cells for tables. Now, instead of a table with multiple cells, each panel (<code>ActivePoké</code> or <code>InactivePoké</code>) has its own table with a single cell. Using [[Wild Area#Pokémon found in the Wild Area|Wild Area]] as an example:

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{ActivePoké|Wild Area|Braviary|Wild Area Braviary.png|Normal|Flying|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Maractus|Wild Area Maractus.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Wooloo|Wild Area Wooloo.png|Normal|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ribombee|Wooloo anime.png|Bug|Fairy|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Grubbin|Wild Area Grubbin.png|Bug|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Phantump|Wild Area Phantump.png|Ghost|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Seedot|Wild Area Seedot.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Goomy|Wild Area Goomy.png|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Hippopotas|Wild Area Hippopotas.png|Ground|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Tympole|Wild Area Tympole.png|Water|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Frillish|Wild Area Frillish.png|Water|Ghost|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Flygon|Wild Area Flygon.png|Ground|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Snorlax|Wild Area Snorlax.png|Normal|nick=Snorlax ↔ Gigantamax Snorlax|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Rookidee|Wild Area Rookidee.png|Flying|nick=Rookidee|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Budew|Wild Area Budew.png|Grass|Poison|nick=Budew|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Butterfree|Wild Area Maractus Butterfree.png|Bug|Flying|nick=Butterfree|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Joltik|Wild Area Joltik Ditto.png|Bug|Electric|nick=Joltik|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ditto|Wild Area Joltik Ditto.png|Normal|nick=Ditto|link=no}}
|}
</div>

Caught Pokémon:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{InactivePoké|Goh|Scorbunny|Goh Scorbunny.png|fire|link=Goh's Cinderace}}
|}
{|
|{{InactivePoké|Goh|Boldore|Goh Boldore.png|Rock|link=List of Goh's Pokémon#Boldore}}
|}
{|
|{{InactivePoké|Ash|Dracovish|Ash Dracovish.png|Water|Dragon}}
|}
{|
|{{InactivePoké|Goh|Arctozolt|Goh Arctozolt.png|Electric|Ice|link=List of Goh's Pokémon#Arctozolt}}
|}
</div>


<div class="toccolours mw-collapsible mw-collapsed">
'''Code'''
<div class="mw-collapsible-content">
<pre>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{ActivePoké|Wild Area|Braviary|Wild Area Braviary.png|Normal|Flying|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Maractus|Wild Area Maractus.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Wooloo|Wild Area Wooloo.png|Normal|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ribombee|Wooloo anime.png|Bug|Fairy|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Grubbin|Wild Area Grubbin.png|Bug|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Phantump|Wild Area Phantump.png|Ghost|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Seedot|Wild Area Seedot.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Goomy|Wild Area Goomy.png|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Hippopotas|Wild Area Hippopotas.png|Ground|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Tympole|Wild Area Tympole.png|Water|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Frillish|Wild Area Frillish.png|Water|Ghost|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Flygon|Wild Area Flygon.png|Ground|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Snorlax|Wild Area Snorlax.png|Normal|nick=Snorlax ↔ Gigantamax Snorlax|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Rookidee|Wild Area Rookidee.png|Flying|nick=Rookidee|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Budew|Wild Area Budew.png|Grass|Poison|nick=Budew|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Butterfree|Wild Area Maractus Butterfree.png|Bug|Flying|nick=Butterfree|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Joltik|Wild Area Joltik Ditto.png|Bug|Electric|nick=Joltik|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ditto|Wild Area Joltik Ditto.png|Normal|nick=Ditto|link=no}}
|}
</div>

Caught Pokémon:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{InactivePoké|Goh|Scorbunny|Goh Scorbunny.png|fire|link=Goh's Cinderace}}
|}
{|
|{{InactivePoké|Goh|Boldore|Goh Boldore.png|Rock|link=List of Goh's Pokémon#Boldore}}
|}
{|
|{{InactivePoké|Ash|Dracovish|Ash Dracovish.png|Water|Dragon}}
|}
{|
|{{InactivePoké|Goh|Arctozolt|Goh Arctozolt.png|Electric|Ice|link=List of Goh's Pokémon#Arctozolt}}
|}
</pre>
</div>
</div>

=== Headers/sections ===
It's also possible to make multiple sections side-by-side. Section 5 span 2 columns.

This is very useful for a lot of elements, but for sections (unless it's only 2 sections), it will need a media query.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, auto))">
<div>
==== Section 1 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 2 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 3 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 4 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div style="grid-column: span 2">
==== Section 5 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>

<div class="toccolours mw-collapsible mw-collapsed">
'''Code'''
<div class="mw-collapsible-content">
<pre>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, auto))">
<div>
==== Section 1 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 2 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 3 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div>
==== Section 4 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div style="grid-column: span 2">
==== Section 5 ====
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</pre>
</div>
</div>

== Media Queries ==
Media Queries are very useful and I use it a lot on my projects. On my personal wiki, I modified one based on Bootstrap and imported to the <code>Common.css</code>. Well, in one hand it's very useful, it makes extremly easy to create almost any type of layout and I don't have to worry about inserting a specific display for each element, but in the other, the CSS will be very large, but I don't think it would cause any slowdowns.

<pre>
@media screen and (min-width: 768px) {
      .element {
                  ...
               }
}
</pre>

My recommended media queries:

{| class="wikitable"
!
! Smaller
! Small
! Medium
! Large
! Larger
|-
! Size
| <576px
| ≥576px
| ≥768px
| ≥992px
| ≥1200px
|}

=== Responsive tables ===
Tables are a bit complicated to adapt, because sometimes they have a lot of content and that's not good for mobile, but the content can't be removed, obviously. One efficient workaround I like is creating an element with <code>overflow-x: auto</code> and <code>width: 100%</code>, so you can place the table inside and it works for any screen size. Resize the screen and see:

<div style="display: block; overflow-x: auto; width: 100%">
{{learnlist/levelh/8|Sceptile|Grass|Grass|3}}
{{learnlist/level8|1|Dual Chop|Dragon|Physical|40|90|15}}
{{learnlist/level8|1|Fury Cutter|Bug|Physical|40|95|20}}
{{learnlist/level8|1|False Swipe|Normal|Physical|40|100|40}}
{{learnlist/level8|1|X-Scissor|Bug|Physical|80|100|15}}
{{learnlist/level8|1|Energy Ball|Grass|Special|90|100|10||'''}}
{{learnlist/level8|1|Pound|Normal|Physical|40|100|35}}
{{learnlist/level8|1|Leer|Normal|Status|—|100|30}}
{{learnlist/level8|1|Leafage|Grass|Physical|40|100|40||'''}}
{{learnlist/level8|1|Quick Attack|Normal|Physical|40|100|30}}
{{learnlist/level8|{{tt|Evo.|Learned upon evolving}}|Dual Chop|Dragon|Physical|40|90|15}}
{{learnlist/level8|5|Mega Drain|Grass|Special|40|100|15||'''}}
{{learnlist/level8|12|Detect|Fighting|Status|—|—|5}}
{{learnlist/level8|15|Quick Guard|Fighting|Status|—|—|15}}
{{learnlist/level8|20|Assurance|Dark|Physical|60|100|10}}
{{learnlist/level8|25|Giga Drain|Grass|Special|75|100|10||'''}}
{{learnlist/level8|30|Slam|Normal|Physical|80|75|20}}
{{learnlist/level8|35|Double Team|Normal|Status|—|—|15}}
{{learnlist/level8|42|Leaf Blade|Grass|Physical|90|100|15||'''}}
{{learnlist/level8|49|Screech|Normal|Status|—|85|40}}
{{learnlist/level8|56|Endeavor|Normal|Physical|—|100|5}}
{{learnlist/level8|63|Leaf Storm|Grass|Special|130|90|5||'''}}
{{learnlist/levelf/8|Sceptile|Grass|Grass|3}}
</div>

So, if you need two "responsive" tables side-by-side, you can just wrap the tables in a <code>div</code> with this styling and then wrap everything in a grid.

== [[Template:Moveanime|<code>Moveanime</code> template]] ==
Someone on Discord always complained about this template, so I decided to re-create here, using the grids. The only "problem" is the width of the panel, because it would need a media query to be smaller on larger screens. I also turned the text into black because I always thought it was a bit hard to read with the <code>Type color light</code> text color.

<div class="roundy" style="background: #{{Ground color light}}; border: 3px solid #{{Ground color dark}}; margin: auto; padding: .25rem; text-align: center">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, auto));">
<div>[[File:Goh_Dugtrio_Bulldoze.png|150px]]<br>'''Dugtrio'''</div>
<div>[[File:Clemont_Heliolisk_Bulldoze.png|150px]]<br>'''Heliolisk'''</div>
<div>[[File:Hapu_Mudsdale_Bulldoze.png|150px]]<br>'''Mudsdale'''</div>
</div>
<div class="roundy" style="border: 1px solid #{{Ground color}}; font-size: small">The user stomps down on the ground and creates a shock wave on the ground crashing towards the target.</div>
<div style="display: block; overflow-x: auto; width: 100%">
{| class="roundy"
! style="background: #{{Ground color dark}}; color: #{{Ground color light}}" | Pokémon
! colspan="2" style="background: #{{Ground color dark}}; color: #{{Ground color light}}" | Method
|-
! style="background: #{{Ground color dark}}; color: #{{Ground color light}}" | User
! style="background: #{{Ground color dark}}; color: #{{Ground color light}}; width: 50%" | First used in
! style="background: #{{Ground color dark}}; color: #{{Ground color light}}" | Notes
|-
| style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | [[File:695MS8.png|link=Heliolisk]] Heliolisk
| colspan="2" style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | Heliolisk stomps down on the ground and creates a shock wave on the ground. The shock wave then crashes towards the opponent.
|-
| style="border: 1px solid #{{Ground color}}" | Clemont's Heliolisk
| style="border: 1px solid #{{Ground color}}" | ''Clemont's Got a Secret!''
| style="border: 1px solid #{{Ground color}}" | Debut
|-
| style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | [[File:750MS8.png|link=Heliolisk]] Mudsdale
| colspan="2" style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | Mudsdale's body becomes surrounded in an orange aura and it stands on its hind legs. It them stomps its front two feet on the ground and creates an orange ring of aura pulsating from where it stomped, causing the ground to shake.
|-
| style="border: 1px solid #{{Ground color}}" | Hapu's Mudsdale
| style="border: 1px solid #{{Ground color}}" | ''A Grand Debut!''
| style="border: 1px solid #{{Ground color}}" | None
|-
| style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | [[File:051MS8.png|link=Heliolisk]] Dugtrio
| colspan="2" style="background: #{{Ground color}}; border: 1px solid #{{Ground color dark}}" | Dugtrio causes the ground to shake.
|-
| style="border: 1px solid #{{Ground color}}" | Endo's Dugtrio
| style="border: 1px solid #{{Ground color}}" | ''JN052''
| style="border: 1px solid #{{Ground color}}" | None
|}
</div>
</div>