Template:Content grid/doc

This is a documentation subpage for Template:Content grid.
It may contain usage information, categories and other content that is not part of the original template page.

This template uses TemplateStyles:

Template:Content grid/styles.css

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.~~

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