Template:ContentGrid

{{{content}}}

Template documentation

This template uses TemplateStyles:

Template:ContentGrid/styles.css

Usage

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

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

Examples

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

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

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

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

// No: Avoid composing message keys
$context->msg( 'templatesused-' . ( $section ? 'section' : 'page' ) );

// Yes: Prefer full message keys
$context->msg( $section ? 'templatesused-section' : 'templatesused-page' );