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