W3docs
ru
Войти

Свойство CSS grid-column-end

See how to use CSS grid-column-end property to specify the number of columns to span and the define the end position of the item. Description, values and examples.

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

Начальное значениеauto
Применяется кЭлементам сетки.
НаследуетсяНет.
АнимацияДа. Количество колонок анимируется.
ВерсияCSS Grid Layout Module Level 1
DOM-синтаксисobject.style.gridColumnEnd = "3";

Синтаксис

Синтаксис свойства CSS grid-column-end

grid-column-end: auto | span n | column-line | initial | inherit;

Пример использования свойства grid-column-end:

Пример свойства CSS grid-column-end со значением auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>
Попробуйте сами »

Результат

CSS grid-column-end Property

Пример свойства grid-column-end с номерами линий и значениями span:

Пример свойства CSS grid-column-end со значением span n

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: 3;
      }
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

В следующем примере указано, сколько колонок займёт элемент.

Пример свойства grid-column-end со значением "span n":

Пример свойства CSS grid-column-end со значением 'span n'

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 25px;
        padding: 20px;
        background-color: #7cbf7c;
      }
      article div {
        text-align: center;
        font-size: 35px;
        background-color: #ffffff;
        padding: 30px 0;
      }
      article div:first-child {
        grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <article>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </article>
  </body>
</html>
Попробуйте сами »

В следующем примере применённое значение указывает, на какой колонке должно завершаться отображение элемента.

Пример свойства grid-column-end со значением номера линии:

Пример свойства CSS grid-column-end со значением 'column-line':

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-gap: 5px;
        background-color: #8ebf42;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
      }
      .grid-container > div {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
      }
      .box1 {
        grid-column-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства grid-column-end со значением "auto":

Пример использования свойства CSS grid-column-end со значением auto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеЗапустить
autoЗанимается только одна колонка. Это значение по умолчанию для данного свойства.Запустить »
span nУказывает количество колонок.Запустить »
column-lineУказывает номер или имя линии колонки, на которой должен заканчиваться элемент.Запустить »

Практика

Практика

Что регулирует свойство 'grid-column-end' в CSS?