Template:Grid

Usage

{{Grid
|container class=<class to use for the container element, default: grid-container>
|item class=<class to use for the first item element, default: grid-item>
|container style=<inline css to apply to the container>
|item style=<inline css to apply to the first item>
|no container=<supply any parameter to skip generating the container element>
|<mediawiki code to be included inside the element>
}}

Use {{Grid/NewItem}} to end one item and begin another

If you include = anywhere in the content of your grid (including table definitions and props on html tags, but not template invocations or section syntax) and the content is not rendering, see #Including =.

For including tables, see #Including tables

Examples

(use devtools to inspect blocks)

Simple example

Code

{{Grid|item style=background-color: yellow;|
This is in one div
{{Grid/NewItem}}
This is another div!
}}

Result

This is in one div

This is another div!

Changing classes

Code

{{Grid|container class=test-container|item class=test-item|
This is in one div
{{Grid/NewItem|class=test-item}}
This is another div!
{{Grid/NewItem|class=test-item special-item}}
This is a special div!
}}

Result

This is in one div

This is another div!

This is a special div!

Nesting

Code

{{Grid|
This is in one div
{{Grid/NewItem|class=grid-item grid-container}}
{{Grid|no container=yes|
This is an item in a nested container
{{Grid/NewItem}}
and this is another
}}
{{Grid/NewItem}}
This is another div in the root container
}}

Result

This is in one div

This is an item in a nested container

and this is another

This is another div in the root container

Inline CSS

(you'd probably use this for placing/resizing grid items instead of setting background colors and font sizes)

Code

{{Grid|container style=font-size: 0.75rem;|item style=background-color: #777;|
This is in one div
{{Grid/NewItem}}
This is another div!
{{Grid/NewItem|style=font-size: 1rem; background-color: #333}}
This is a third div!
}}

Result

This is in one div

This is another div!

This is a third div!

Including =

To have the template render properly while including ='s in the content, you must explicitly state the first (and only) positional argument, preventing mediawiki from interpreting it as some random keyword arg.

When using this trick, headings and tables may not be the first thing in the first item. You can hide the first item with CSS as a workaround.

Correct Code

{{Grid|1=
=
}}

Correct Result

=

Incorrect Code

{{Grid|
=
}}

Incorrect Result

{{{1}}}

Including tables

To insert a table without breaking the template, you must use the trick described above AND replace all instances of | with {{!}}.

If the = trick was used, the table may not be the first thing in the first item. You can hide the first item with CSS as a workaround.

Correct Code

{{Grid|1=
Test
{{{!}}class="wikitable"
{{!}}hello
{{!}}this
{{!}}-
{{!}}is a
{{!}}table
{{!}}}
}}

Correct Result

Test

hello	this
is a	table

Incorrect Code

{{Grid|1=
Test
{|class="wikitable"
|hello
|this
|-
|is a
|table
|}
}}

Incorrect Result

hello