Template:Content grid

{{{content}}}
Template documentation[view · edit · history · purge]
This documentation is transcluded from Template:Content grid/doc.
Category:Main message boxesCategory:Uses TemplateStyles templates with errorsCategory:Templates using TemplateStyles

Copied from mw:Template:ContentGrid.

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

Usage

[[:Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.:{{{2}}}]] ([{{fullurl::Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.:{{{2}}}|action=edit}} edit]|[[:Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing. talk:{{{2}}}|talk]]|[{{fullurl::Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.:{{{2}}}|action=history}} history]|[{{fullurl:Special:Whatlinkshere/:Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.:{{{2}}}|limit=999}} links]|[{{fullurl::Add style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.:{{{2}}}|action=watch}} watch]|logs)


{{TwoColumnGrid}} uses this template with |grid-rows-min-max=10px and |grid-columns-min-max= having a default value of 500px.

Examples

{{Content grid
|style= custom style
|content=
Text A
Text B
Text C
}}

Produces:

Text A

Text B

Text C

This template works well with other templates, like Template:Colored box.

For example:

{{Content grid
|content=

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

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

}}

Produces:

Title
Content
Title
Content

Comparing good and bad sample code

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

{{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>}}
}}

Produces:

Yes
<div style="margin:0 auto; overflow:scroll; width:auto; max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>
No
[[Image:Panorama.jpg|1800px]]

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

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

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

Produces:

Category:Multi-column templates
Category:Main message boxes Category:Multi-column templates Category:Templates using TemplateStyles Category:Uses TemplateStyles templates with errors