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

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

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

Синтаксис

Синтаксис CSS grid-column-start

css

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

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

Пример кода CSS grid-column-start

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start 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>
  </body>
</html>

Try it Yourself »

Результат

Grid-column-start property

Здесь мы указали, с какого столбца должен начинаться вывод элемента. Примечание: Поскольку шаблон сетки определяет только 4 столбца, линии 5 и 6 создаются неявно для размещения элемента. В следующем примере мы указали количество столбцов, которые будет занимать элемент.

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

Ещё один пример кода CSS grid-column-start

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start property example</h2>
    <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>

Try it Yourself »

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start 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 class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Try it Yourself »

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container>div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h1> Grid-column-start Property </h1>
    <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>9</div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Что делает свойство CSS grid-column-start?

Он указывает браузеру, с какого места начинать столбец в макете сетки.Он указывает адрес электронной почты отправителя в контактной форме.Он определяет кодировку символов для HTML-документа.Он определяет ширину границы в макете сетки.Он определяет, где размещается элемент в макете сетки.

Свойство CSS grid-column-start ​

Синтаксис ​

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

Результат ​

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

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

Пример свойства grid-column-start со значением "column-line": ​

Значения ​

Практика ​

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

Синтаксис

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

Результат

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

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

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

Значения

Практика