Template:Paired list grid: Difference between revisions

Line 1:

Line 105:

</div>

}}

</dl><noinclude>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~~.

</dl></includeonly><noinclude>Displays a grid containing key-value pairs.

The grid's width is split into 1/12ths, so 12 "span" values fill the width. Default span value is 3 — 3/12ths or 1/4th of the width.

Mimics a table layout, but avoids certain SEO and accessibility issues, especially mixed-up reading order, with using a table for this layout.

== Example ==

@@ Line 1: / Line 1: @@
-<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;">
+<includeonly><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>
@@ Line 105: / Line 105: @@
      </div>
 }}
-</dl><noinclude>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.
+</dl></includeonly><noinclude>Displays a grid containing key-value pairs.
+The grid's width is split into 1/12ths, so 12 "span" values fill the width. Default span value is 3 &mdash; 3/12ths or 1/4th of the width.
+Mimics a table layout, but avoids certain SEO and accessibility issues, especially mixed-up reading order, with using a table for this layout.
 == Example ==