CSS grid-column-start Property

Last Updated : 27 Aug, 2024

The grid-column-start property in CSS defines the starting column line for a grid item within a grid container, offering significant layout flexibility. This property can utilize various values to control item placement, enhancing the responsive design of web pages.

Syntax

grid-column-start: auto | span n | column-line;

Default Value: auto

Property Values

1. auto:

A keyword specifying that the property contributes nothing to the grid item’s placement. The Default value, the item will be placed following the flow

Syntax:

grid-column-start: auto;

Example:

Output:

👁 Image

2. span n:

A keyword Specifies the number of columns the item will span and if the name is given as a, only lines with that name are counted

Syntax:

grid-column-start: span n;

Example:

Output:

👁 Image

3. column-line:

A keyword Specifies on which column to start the display of the item, user can set the starting column.

Syntax:

grid-column-start: column-line;

Example:

Output:

👁 Image

The grid-column-start property is essential for creating advanced grid layouts in modern web design. By understanding and utilizing its values—auto, span n, and column-line—developers can achieve precise control over grid item placement, enhancing the responsiveness and functionality of web pages.

Supported Browser: The browser supported by grid-column-start Property are listed below: