# grid-column property

The `grid-column` property specifies a starting and ending positions of an element in a grid or column grid. Property values ​​can be positive or negative numbers, separated by a slash. The first number indicates the starting position of the element, the second the ending position.

If we specify a positive number as the value, then the position of the element is counted from left to right. If you specify a negative number, the element will be placed in the reverse order, i.e. from right to left.

## Syntax

`selector { grid-column: starting position / ending position; }`

## Example

Let's give the elements in the grid starting and ending positions:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 2; } #elem2 { grid-column: 1 / 3; } #elem3 { grid-column: 1 / 4; }`

:

## Example

Now let’s specify negative numbers in the `grid-column` property:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / -2; } #elem2 { grid-column: 1 / -3; } #elem3 { grid-column: 1 / -4; }`

:

## Example

Now we make sure that the first, second and third elements are located in the first row. And the fourth element occupied the entire second row:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> </div>` `#parent { display: grid; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 2; } #elem2 { grid-column: 2 / 3; } #elem3 { grid-column: 3 / 4; } #elem4 { grid-column: 1 / 4; }`

:

## Example

When columns occupied by adjacent elements overlap, each subsequent element is moved one row lower. Let's use this feature to make sure that the first element is located in the first row, the second in the second, and the third and fourth in the third row:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> </div>` `#parent { display: grid; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 4; } #elem2 { grid-column: 2 / 3; } #elem3 { grid-column: 1 / 2; } #elem4 { grid-column: 3 / 4; }`

:

## Example

Let's combine the `grid-column` and `grid-row` properties:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> </div>` `#parent { display: grid; grid-template-columns: 2fr 1fr 1fr; border: 2px solid #696989; padding: 10px; height: 300px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row: 1 / 3; } #elem2 { grid-row: 1 / 2; } #elem3 { grid-row: 1 / 2; } #elem4 { grid-row: 2 / 3; grid-column: 2 / 4; }`

:

## Example

Now let's make sure that the first and fifth blocks occupy the entire row, and the second block occupies two rows and two columns, and the third and fourth blocks occupy one row and two columns:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> <div id="elem4">4</div> <div id="elem5">5</div> </div>` `#parent { display: grid; grid-template-columns: 2fr 1fr 1fr; border: 2px solid #696989; padding: 10px; height: 300px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-row: 1 / 2; grid-column: 1 / 4; } #elem2 { grid-row: 2 / 4; grid-column: 1 / 2; } #elem3 { grid-row: 2 / 3; grid-column: 2 / 4; } #elem4 { grid-row: 3 / 3; grid-column: 2 / 4; } #elem5 { grid-row: 4 / 5; grid-column: 1 / 4; }`

:

## See also

- the `grid-row` property
  that specifies a starting and ending positions of an element in a grid by rows
- the `grid-column-start` property
  that specifies an starting position of an element in grid by columns
- the `grid-column-end` property
  that specifies an ending position of an element in grid by columns
- the `grid-template-columns` property
  that specifies a number and width of columns in a grid
- the `grid-auto-columns` property
  that specifies a number and width of columns in an implicitly-created grid

← →
↑
en ru