CSS grid-column-start — початкова лінія стовпця

Властивість grid-column-start визначає стовпчик у сітці, де буде починатися розташування вибраного елементу і скільки треків він охоплює.

Наприклад:

.box .item {
  display: grid;
  grid-column-start: 2; /* Цей елемент буде починатися з 2-ї колонки сітки */
}

Ви також можете використовувати іменовані області:

/* визначаємо іменовані області */
  grid-template-areas: 
    "a b c"
    "d e f"
    "g h i";
    
/* використовуємо їх для задання координат */
.box >` .item {
  grid-column-start: a;
}

Ви також можете посилатися на будь-які неявні (і явні) названі лінії, які були визначені в сітці. Неявні названі рядки створюються автоматично, коли ви створюєте іменовану область. Тому, коли ви створюєте іменовану область сітки (як у попередньому прикладі), створюється цілий набір неявних названих рядків.

Для кожної названої сіткової області з ім'ям foo створюються чотири неявні іменовані рядки. Два імені, що називаються foo-start, називаються рядками початку рядка і стовпця та двома імені foo-end називаються рядками кінці рядка і стовпця. Таким чином, ми можемо взяти приклад, і додати -start до c, і тепер ми будемо звертатися до неявних названих рядків:

/* визначаємо іменовані області */
  grid-template-areas: 
    "a b c"
    "d e f"
    "g h i";
    
/* використовуємо їх для задання координат */
.box >` .item {
  grid-column-start: c-start;
}

Таким чином, ми фактично не визначали c-start в будь-якому місці коду. Вони були автоматично створені з наших іменованих областей.

Коли ви посилаєтеся на іменовану область сітки (як у попередньому прикладі), браузер фактично обирає початковий край цієї області. CSS також дозволяє вказувати власні імена для ліній сітки. Вони називаються явними іменованими рядками. Ви можете створювати ці імена, коли ви визначаєте треки, а потім звертаєтесь до них, як з неявними іменованими рядками:

/* визначаємо стовпці й іменовані лінії */
grid-template-columns: 1fr [col1-end] 1fr [col2-end] 1fr [col3-end];

/* звертаємося до іменованої лінії */
.box >` .item {
  ggrid-column-start: col1-end;
}

Ключове слово span може використовуватися для того, щоб елемент сітки міг послідовно поєднувати кілька треків:

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

grid-column-start: <number> | <name> | span <number> | span <name> | auto;

Властивість grid-column-start може отримувати 4 значень:

<line>

Може бути цифрою, яка означає нумеровану лінію сітки або ім'я для посилання на названий стовпчик сітки

автор: Svitlana

правити

span <number>

Елемент буде проходити через вказану кількість сіткових доріжок

автор: Svitlana

правити

span <name>

Елемент буде розширюватися, доки не потрапить на рядок із зазначеним іменем

автор: Svitlana

правити

auto

Вказує автоматичне місце розташування елементу у сітці

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	52	10.1	44	16	—

Підтримка: мобільні переглядачі

Переглядач
	57	57	52	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">
    <div class="item">старт із 2-ї лінії</div>
    <div>2</div>
    <div>3</div>
</div>

.box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.box div {
    background: #eee;
    padding: 8px;
}

.box .item {
    grid-column-start: 2;
    background: #0172ad;
    color: #fff;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
}

.box .item {
  background-color: tomato;
  color: white;
  font-size: 1.5em;
  padding: 16px;
}

.box .item:nth-child(5) {
  grid-column-start: span 2;
  background: gold;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item"><code>grid-column-start: 3;</code></div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-gap: 2px;
}

.box .item {
  background-color: tomato;
  color: white;
  font-size: 1.4em;
  font-family: monospace;
  padding: 16px;
}

.box .item:nth-child(4) {
  grid-column-start: 3;
  background: gold;
}

<div class="grid">
    <div class="item a">start: 1</div>
    <div class="item b">start: 3</div>
    <div class="item c">start: -2</div>
    <div class="item d">span 2</div>
</div>
<p class="note">Ліній п'ять: |1| колонка |2| колонка |3| колонка |4| колонка |5|</p>

body {
    font-family: monospace;
    font-size: 14px;
    padding: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: #eee;
    border: 2px solid #bbb;
    padding: 8px;
}

.item {
    padding: 10px;
    background: rgba(255, 215, 0, .55);
    border: 2px solid #c9a227;
    text-align: center;
}

.a {
    grid-column-start: 1;
}

.b {
    grid-column-start: 3;
}

.c {
    grid-column-start: -2;
    background: rgba(120, 200, 255, .55);
    border-color: #3b8ec2;
}

.d {
    grid-column-start: span 2;
    background: rgba(150, 220, 150, .55);
    border-color: #4a9a4a;
}

.note {
    color: #555;
}