# grid-column-end property

The `grid-column-end` property specifies an ending position of an element in a grid up to a specific column. The property value can be a positive or negative number. If we specify a positive number, then the ending 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.

An important nuance of the `grid-column-end` property is that the number of the specified column is not included in the end position of the element - if we specify the number `3`, then the element will only occupy the first and second columns.

## Syntax

`selector { grid-column-end: positive or negative number; }`

## Example

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

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

:

## Example

And now, using the `grid-column-start` property, we’ll make sure that the first, second and third elements are located in 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-start: 1; grid-column-end: 2; } #elem2 { grid-column-start: 2; grid-column-end: 3; } #elem3 { grid-column-start: 3; grid-column-end: 4; } #elem4 { grid-column-start: 1; grid-column-end: 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-start: 1; grid-column-end: 4; } #elem2 { grid-column-start: 2; grid-column-end: 3; } #elem3 { grid-column-start: 1; grid-column-end: 2; } #elem4 { grid-column-start: 3; grid-column-end: 4; }`

:

## Example

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

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

:

## See also

- the `grid-column-start` property
  that specifies an starting position of an element in grid by columns
- the `grid-column` property
  that specifies a starting and ending positions of an element in a 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