In this section, we will learn what the grid-columns property is and how to use it in CSS.

Click here to run the example of grid-column property.

CSS grid-column Property Definition and Usage

After we’ve created our CSS grid, by default, grid-items will be automatically positioned on each cell of that grid. But this is the default behavior and we can decide where on the grid we want each grid-item to be positioned.

So in order to do this, we need 2 properties.

• grid-column: Using this property, we can declare the number of grid’s columns that the target grid-item should expand on.
• grid-row: Using this property, we can declare the number of grid’s rows that the target grid-item should expand on.

This section is about `grid-column` and you can learn about `grid-row` in its section.

You should know that the `grid-column` is the shorthand property of two other properties:

• grid-column-start: Using this property, we can declare the line number or line name that the left edge of the target item should be placed on.
• grid-column-end: Using this property, we can declare the line number of line name that the right edge of the target item should be placed on.

CSS grid-column Property Syntax

grid-column: start-column-line-number / end-column-line-number;

grid-column: start-column-line-name / end-column-line-name;

CSS grid-column Property Value

• start-column-line-number: We know that a grid has multiple vertical lines, right? So using this value, we can determine what line number the left edge of the target item should be placed on.
• end-column-line-number: Using this value, we can determine what line number the right edge of the target item should be placed on.
• start-column-line-name: As explained in `grid-template-columns` section, when creating a grid, we can actually name the lines of that grid. So “start-column-line-name” is actually the name of the grid’s line that we want the left edge of the target item to be placed on.
• end-column-line-name: this value is actually the name of the grid’s line that we want the right edge of the target item to be placed on.

Note: We use forward slash “/” in order to separate the values of start and ending line numbers/ names.

Also, there’s a keyword named “span” which can be used as the value of this property. Here’s the syntax:

grid-column: span number-of-tracks;

• span: this is the keyword and that means a number of tracks.
• Number-of-track: this is the number of tracks we want the grid-item to expand on.

Example= grid-column: span 3; // means expand the target item on 3 columns.

Example: grid-column property in CSS

See the Pen grid-column property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.