Template:ContentGrid/doc

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

How to use

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

Typing:

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

Creates:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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

Parameters

All parameters are case sensitive.

Parameter	Allowed values	Notes
`grid-columns-min-max`	String	The minmax() size of the columns. Defaults to `300px`.
`grid-rows-min-max`	String	The minmax() size of the rows. Defaults to `100px`.
`grid-gap`	String	The gap between grid items. Defaults to `10px`.
`width`	String	The width of the ContentGrid. Can be a length defined by `px`, `em` or `%`, or `auto`. Defaults to `auto`.

TemplateData

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

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Grid columns min max	`grid-columns-min-max`	The minmax() size of the columns. Default 300px	Line	optional
Grid rows min max	`grid-rows-min-max`	The minmax() size of the rows. Default 100px	Line	optional
Grid gap	`grid-gap`	The gap between grid items. Default 10px	Line	optional
Width	`width`	The width of the ContentGrid. Can be a length defined by px, em or %, or by auto. Default auto	Line	optional