Template:GridItem

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)

Example(s)

Automatically responsive columns with repeat and auto-fit (shrink browser width to view responsiveness):

{{CSSGrid|template-columns=repeat(auto-fit, minmax(200px, 1fr) )|style=max-width:800px;|
{{GridItem|One}}
{{GridItem|Two}}
{{GridItem|Three}}
{{GridItem|Four}}
{{GridItem|Five - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}
{{GridItem|Six}}
}}

Gives:

One

Two

Three

Four

Five - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Six

---

{{CSSGrid|template-columns=repeat(auto-fit, minmax(200px, 1fr) )|style=max-width:800px;|
{{GridItem|column=span 2|One}}
{{GridItem|Two}}
{{GridItem|Three|row=span 2}}
{{GridItem|Four|row=span 2}}
{{GridItem|Five - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}
{{GridItem|Six}}
}}

Gives:

One

Two

Three

Four

Five

Six

See Also

• {{CSSGrid}}, the template mainly used with this one to wrap the grid item contents in a grid.
• Template:GridItem/styles.css, the CSS for this template.

A CSS Grid item (and nested grid wrapper), each item automatically appears in the grid where specified, and may also form a nested grid.

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-) area	area	Specify values for the "grid-area" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) column	column	Specify values for the "grid-column" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) column-start	column-start	Specify values for the "grid-column-start" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) column-end	column-end	Specify values for the "grid-column-end" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) row	row	Specify values for the "grid-row" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) row-start	row-start	Specify values for the "grid-row-start" CSS property (if desired). No semi-colon needed.	String	optional
(grid-) row-end	row-end	Specify values for the "grid-row-end" CSS property (if desired). No semi-colon needed.	String	optional
display	display	no description	String	optional
(grid-) template	template	Specify values for the "grid-template" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
template-columns	template-columns	Specify values for the "grid-template-columns" CSS property (if desired) for a nested grid. No semi-colon needed.	Unknown	optional
template-rows	template-rows	Specify values for the "grid-template-rows" CSS property (if desired) for a nested grid. No semi-colon needed.	Unknown	optional
template-areas	template-areas	Specify values for the "grid-template-areas" CSS property (if desired) for a nested grid. No semi-colon needed.	Unknown	optional
grid	grid	Specify values for the "grid" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
(grid-) auto-columns	auto-columns	Specify values for the "grid-auto-columns" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
(grid-) auto-rows	auto-rows	Specify values for the "grid-auto-rows" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
(grid-) auto-flow	auto-flow	Specify values for the "grid-auto-flow" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
gap	gap	Specify values for the "gap" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
column-gap	column-gap	Specify values for the "column-gap" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
row-gap	row-gap	Specify values for the "row-gap" CSS property (if desired) for a nested grid. No semi-colon needed.	String	optional
class	class	If desired, specify CSS class names to add additional classes, separate classes with a space. Example MyClass	String	optional
style	style	If desired, specify valid CSS styles separated by a semi-colon and a spaces. Example background-color:pink; color:red;	String	optional