{{{content}}}
 | This template uses 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
editAdd
style="margin: 1em 0; gap: 2em;" by making type=normal to get better spacing.
{{TwoColumnGrid}} uses this template with |grid-rows-min-max=10px and |grid-columns-min-max= having a default value of 500px.
Examples
edit{{Content grid
|style= custom style
|content=
Text A
Text B
Text C
}}
Produces:
Text A
Text B
Text CThis 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
editTo 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|
<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>
}}
}}
Produces: