grid-column

Summary

Controls a grid item’s placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration.

Overview table

Initial value

See individual properties

Applies to

Grid items

Inherited

No

Media

visual

Computed value

See individual properties

Animatable

No

CSS Object Model Property
:

Percentages

See individual properties

Syntax

• grid-column: <grid-line> [ / <grid-line> ]

Values

<grid-line> [ / <grid-line> ]

If two <grid-line> values are specified, the grid-column-start property is set to the value before the slash, and the grid-column-end property is set to the value after the slash. If the second value is omitted, then if the first value is an identifier (<ident>), the grid-column-end property is also set to that <ident>; otherwise, it is set to "auto".

Examples

/*
The shorthand syntax
*/
grid-column: 1 / 3;
/*
is equivalent to
*/
grid-column-start: 1
grid-column-end: 3;

Related specifications

W3C Grid Layout Module

W3C Working Draft

See also

Related pages

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• stylestyle
• aa
• abbr
• acronymacronym
• b
• bdo
• big
• br
• cite
• code
• dfn
• em
• i
• img
• input
• kbd
• label
• q
• samp
• select
• small
• span
• strong
• sub
• sup
• textArea
• tt
• var
• address
• blockQuote
• div
• dl
• fieldSet
• form
• noFrames
• noScript
• ol
• p
• pre
• tabletable
• ul
• dd
• dt
• li
• tBody
• td
• tFoot
• th
• tHead
• tr
• button
• del
• ins
• map
• object
• script
• -ms-grid-columns-ms-grid-columns
• -ms-grid-row-ms-grid-row

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]