Template:CSSGrid

Template documentation
Note: portions of the template sample may not be visible without values provided.
View or edit this template's documentation. (About template documentation)

Overview

Non-usage (development-only) example:

{{CSSGrid|style=max-width:600px;|template-columns=1fr 1fr 1fr|
{{GridItem|One}}
{{GridItem|Two}}
{{GridItem|Three}}
{{GridItem|Four}}
{{GridItem|Five}}
{{GridItem|Six}}
}}

Result:

One

Two

Three

Four

Five

Six

Example(s)

• See {{GridItem}} for proper examples.

See Also

• {{GridItem}}, the template that should be used with this one to insert items controlled by this grid wrapper.
• Template:CSSGrid/styles.css, the CSS for this template.

A 2D CSS Grid wrapper to wrap all other grid element templates. Used since flexbox is a 1-dimensional layout (either row, or column but not both), where CSS Grid is 2-dimensional. Used with the {GridItem} template.

Template parameters

Parameter		Description	Type	Status
(content) 1	1 content	Enter the content that should appear in the grid, either other templates or grid items.	String	required
(grid-) template	template	Specify values for the "grid-template" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) template-columns	template-columns	Specify values for the "grid-template-colums" CSS property (if desired). No semi-colon needed. Example repeat (3, 1fr)	String	optional
(grid-) template-rows	template-rows	Specify values for the "grid-template-rows" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) template-areas	template-areas	Specify values for the "grid-template-areas" CSS property (if desired). No semi-colon needed.	String	optional
grid	grid	Specify values for the "grid" CSS property (if desired). No semi-colon needed. This property is shorthand for (grid-) "rows", "columns", "auto-rows", "auto-columns", and "auto-flow" properties (to set all in one statement).	String	optional
(grid-) auto-columns	auto-columns	Specify values for the "grid-auto-columns" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) auto-rows	auto-rows	Specify values for the "grid-auto-rows" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) auto-flow	auto-flow	Specify values for the "grid-auto-flow" CSS property (if desired). No semi-colon needed.	String	optional
gap	gap	Specify values for the "gap" CSS property (if desired). No semi-colon needed. This property is shorthand for "row-gap", and "column-gap" set in one property.	String	optional
column-gap	column-gap	Specify values for the "column-gap" CSS property (if desired). No semi-colon needed.	String	optional
row-gap	row-gap	Specify values for the "row-gap" CSS property (if desired). No semi-colon needed.	String	optional
(CSS) class	class	If desired, specify CSS class names to add additional classes, separate classes with a space. Example MyClass	String	optional
(CSS) style	style	If desired, specify valid css styles separated by a semi-colon and a spaces. Example background:pink; color:red;	String	optional