Template:Paired list grid: Difference between revisions

Revision as of 00:49, 21 April 2025

Displays a grid containing key-value pairs. The grid's width is split into 1/12ths, so 12 "span" values fills the width. Default span value is 3, a four-column appearance.

Example

{{paired list grid
 | key background color = lightblue
 | span 1  = 4
 | key 1   = Level
 | value 1 = 10
 | span 2  = 4
 | key 2   = HP
 | value 2 = 100
 | span 3  = 4
 | key 3   = MP
 | value 3 = 10
 | key 4   = Attack
 | value 4 = 100
 | key 5   = Defence
 | value 5 = 100
 | key 6   = Agility
 | value 6 = 100
 | key 7   = Luck
 | value 7 = 100
}}

Level: 10
HP: 100
MP: 10
Attack: 100
Defence: 100
Agility: 100
Luck: 100

Appearance in narrow viewports:

Level: 10
HP: 100
MP: 10
Attack: 100
Defence: 100
Agility: 100
Luck: 100

@@ Line 1: / Line 1: @@
-<dl style="display: -ms-grid; display: grid; margin: 0; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-radius: 3px; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(12, 1fr); text-align: center;">
+<dl style="display: -ms-grid; display: grid; margin: 5px; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-radius: 3px; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(12, 1fr); text-align: center;">
      <div style="display: inline-block; display: grid; grid-column: span {{{span 1|3}}}; grid-row: span 2; grid-template-rows: subgrid; margin-left: -1px; border-left: 1px solid black;">
          <dt style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};"><span>{{{key 1|}}}</span>

Template:Paired list grid: Difference between revisions

Revision as of 00:49, 21 April 2025

Example

Navigation menu

Search