# Свойство grid-column

Свойство `grid-column` задает начальную и конечную позиции элемента в гриде или сетке по столбцам. Значениями свойства могут быть положительные или отрицательные числа, указанные через слеш. Первое число обозначает начальную позицию элемента, второе - конечную позицию.

Если в качестве значения задаем положительное число, то позиция элемента отсчитывается слева направо. При указании отрицательного числа элемент будет располагаться в обратном порядке, т.е. справа налево.

## Синтаксис

`селектор { grid-column: начальная позиция / конечная позиция; }`

## Пример

Давайте зададим элементам в гриде начальные и конечные позиции:

`<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; }`

:

## Пример

А теперь давайте в свойстве `grid-column` укажем отрицательные числа:

`<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; }`

:

## Пример

А теперь делаем так, чтобы первый, второй и третий элементы располагались в первом ряду. А четвертый элемент занимал весь второй ряд:

`<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; }`

:

## Пример

При перекрытии столбцов, занимаемых соседними элементами, каждый последующий элемент сдвигается на ряд ниже. Давайте с помощью этой особенности сделаем так, чтобы первый элемент расположился в первом ряду, второй - во втором, а третий и четвертый - на третьем ряду:

`<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; }`

:

## Пример

Скомбинируем свойства `grid-column` и `grid-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; 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; }`

:

## Пример

А теперь давайте сделаем так, чтобы первый и пятый блоки занимали весь ряд, а второй блок - два ряда и две колонки, а третий и четвертый блоки - один ряд и две колонки:

`<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; }`

:

## Смотрите также

- свойство `grid-row`,
  которое задает начальную и конечную позиции элемента в гриде по рядам
- свойство `grid-column-start`,
  которое задает начальную позицию элемента в гриде по столбцам
- свойство `grid-column-end`,
  которое задает конечную позицию элемента в гриде по столбцам
- свойство `grid-template-columns`,
  которое задает количество и ширину столбцов в гриде
- свойство `grid-auto-columns`,
  которое задает количество и ширину столбцов в неявном гриде

← →
↑
en ru