Thuộc tính grid-column-start trong CSS Grid

Thuộc tính grid-column-start xác định đường dọc (column line) bắt đầu của grid item. Item sẽ bắt đầu từ line này và trải theo hướng mặc định (span 1) trừ khi có grid-column-end hoặc grid-column.

Cú pháp

.item {
  grid-column-start: <line-number> | <line-name> | span <number> | auto;
}

Ví dụ: grid-column-start: 2

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto auto;
      grid-gap: 10px;
      background-color: #e74c3c;
      padding: 10px;
    }
    .container > div {
      background-color: #f1c40f;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
      border-radius: 4px;
    }
    .ele1 {
      grid-column-start: 2; /* Bắt đầu từ column line 2 (cột 2) */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

Kết quả

Item 1 (ele1) sẽ xuất hiện ở cột 2 (column line 2), để cột 1 trống. Các item khác tự động điền (auto-placement).

Các giá trị grid-column-start

Giá trị	Ví dụ	Mô tả
Line number	`2`, `-1`	Line 2 từ trái, hoặc line cuối từ phải
Line name	`sidebar-start`	Tên line đã định nghĩa trong grid-template-columns
span N	`span 2`	Trải N cột từ vị trí auto-placement
auto	(mặc định)	Tự động đặt theo thuật toán

Kết hợp với grid-column-end

.item {
  grid-column-start: 2;
  grid-column-end: 4;        /* Kết thúc tại line 4 */
  /* Shorthand: */
  grid-column: 2 / 4;        /* start / end */
  grid-column: 2 / span 2;   /* start / span count */
  grid-column: span 2 / 4;   /* span count / end */
}

Named Lines trong grid-template-columns

.container {
  display: grid;
  grid-template-columns: 
    [full-start] 1fr [center-start] 1fr [center-end] 1fr [full-end];
}
.item {
  grid-column-start: center-start;
  grid-column-end: center-end;
  /* Hoặc shorthand: */
  grid-column: center-start / center-end;
}