View source for Template:ContentGrid/doc

ContentGrid is a container that allows for the creation of dynamic grids of boxes. It is often used in combination with {{Template|ColorBox}}.

==How to use==
{{Template|ContentGrid}} is combined with {{Template|ContentGrid/end}} to form the grid. To define each item in the grid, leave a clear line break.

Typing:
<pre>{{ContentGrid}}
<div style="background: red;">Item 1</div>

<div style="background: green;">Item 2</div>

<div style="background: blue;">Item 3</div>

<div style="background: yellow;">Item 4</div>

<div style="background: orange;">Item 5</div>

<div style="background: purple;">Item 6</div>
{{ContentGrid/end}}</pre>
Creates:

{{ContentGrid}}
<div style="background: red;">Item 1</div>

<div style="background: green;">Item 2</div>

<div style="background: blue;">Item 3</div>

<div style="background: yellow;">Item 4</div>

<div style="background: orange;">Item 5</div>

<div style="background: purple;">Item 6</div>
{{ContentGrid/end}}

Resize your browser window to see the grid dynamically change to fit. 

===Parameters===
All parameters are case sensitive.
{| class="wikitable" style="background: #e5f1ec;"
|-
! style="background: #d1e5d9" | Parameter
! style="background: #d1e5d9" | Allowed values
! style="background: #d1e5d9" | Notes
|-
| <code>grid-columns-min-max</code>
| ''String''
| The [https://developer.mozilla.org/en-US/docs/Web/CSS/minmax minmax()] size of the columns. Defaults to <code>300px</code>.
|-
| <code>grid-rows-min-max</code>
| ''String''
| The [https://developer.mozilla.org/en-US/docs/Web/CSS/minmax minmax()] size of the rows. Defaults to <code>100px</code>.
|-
| <code>grid-gap</code>
| ''String''
| The gap between grid items. Defaults to <code>10px</code>.
|-
| <code>width</code>
| ''String''
| The width of the ContentGrid. Can be a length defined by <code>px</code>, <code>em</code> or <code>%</code>, or <code>auto</code>. Defaults to <code>auto</code>.
|}

==TemplateData==
<templatedata>
{
	"params": {
		"grid-columns-min-max": {
			"description": "The minmax() size of the columns.",
			"type": "line",
			"default": "300px",
			"label": "Grid columns min max"
		},
		"grid-rows-min-max": {
			"description": "The minmax() size of the rows.",
			"type": "line",
			"default": "100px",
			"label": "Grid rows min max"
		},
		"grid-gap": {
			"description": "The gap between grid items.",
			"type": "line",
			"default": "10px",
			"label": "Grid gap"
		},
		"width": {
			"description": "The width of the ContentGrid. Can be a length defined by px, em or %, or by auto.",
			"type": "line",
			"default": "auto",
			"label": "Width"
		}
	},
	"description": "ContentGrid is a container that allows for the creation of dynamic grids of boxes. It is often used in combination with {{ColorBox}} templates. The grid needs to be ended with {{ContentGrid/end}}.",
	"format": "inline"
}
</templatedata>

<noinclude>[[Category:Documentation templates]]</noinclude>