Wikipedia>Waddie96: /* Comparing good and bad sample code */

2025-10-19T20:14:26Z

Comparing good and bad sample code

New page

{{Documentation subpage}}

{{Uses TemplateStyles}}

Copied from [[mw:Template:ContentGrid]].

A responsive grid of page elements. Populate the <code>content</code> parameter with grid elements separated by a new line.

== Usage ==

{{dc|1=Add <code>style="margin: 1em 0; gap: 2em;"</code> by making <code>type=normal</code> to get better spacing.}}

{{tl|TwoColumnGrid}} uses this template with {{para|grid-rows-min-max|10px}} and {{para|grid-columns-min-max}} having a default value of <code>500px</code>.

=== Examples ===
<pre><nowiki>{{Content grid
|style= custom style
|content=
Text A
Text B
Text C
}}</nowiki></pre>

Produces:
{{Content grid
|content=
Text A
Text B
Text C
}}
This template works well with other templates, like [[Template:Colored box]].

For example:
<pre><nowiki>{{Content grid
|content=

{{Colored box
|title = Title
|content = Content
}}

{{Colored box
|title =
|content =
}}

}}
</nowiki></pre>

Produces:
{{Content grid
|content=

{{Colored box
|title = Title
|content = Content
}}

{{Colored box
|title = Title
|content = Content
}}

}}

=== Comparing good and bad sample code ===

To compare a good and bad sample of code using {{tl|Colored box}}. For example:

<pre><nowiki>{{Content grid
|content=
{{Colored box|title=Yes|icon=OOjs UI icon check-constructive.svg|content=<syntaxhighlight lang="wikitext">
<div style="margin:0 auto; overflow:scroll; width:auto; max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>
</syntaxhighlight>}}

{{Colored box|title=No|icon=OOjs UI icon close-ltr-destructive.svg|content=<syntaxhighlight lang="wikitext">
[[Image:Panorama.jpg|1800px]]
</syntaxhighlight>}}
}}</nowiki></pre>

Produces:

{{Content grid
|content=
{{Colored box|title=Yes|background-title-color=var(--background-color-success-subtle);|icon=OOjs UI icon check-constructive.svg|content=<syntaxhighlight lang="wikitext">
<div style="margin:0 auto; overflow:scroll; width:auto; max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>
</syntaxhighlight>}}

{{Colored box|title=No|background-title-color=var(--background-color-destructive-subtle);|icon=OOjs UI icon close-ltr-destructive.svg|content=<syntaxhighlight lang="wikitext">
[[Image:Panorama.jpg|1800px]]
</syntaxhighlight>}}
}}

Or, using {{tl|Code convention example}}. For example:

{{#tag:syntaxhighlight|<nowiki>{{Content grid
|content=
{{code convention example|posneg=negative|
<syntaxhighlight lang="php">
// No: Avoid composing message keys
$context->msg( 'templatesused-' . ( $section ? 'section' : 'page' ) );
</syntaxhighlight>
}}

{{code convention example|posneg=positive|
<syntaxhighlight lang="php">
// Yes: Prefer full message keys
$context->msg( $section ? 'templatesused-section' : 'templatesused-page' );
</syntaxhighlight>
}}
}}
</nowiki>|lang=wikitext}}

Produces:

<includeonly>{{Sandbox other||

[[Category:Multi-column templates]]
}}</includeonly>

Template:Content grid/doc - Revision history

Wikipedia>Waddie96: /* Comparing good and bad sample code */