CSS Grid Columns - Cột lưới trong CSS Grid Layout

Trong CSS Grid Layout, Grid Columns là các đường dọc (vertical grid lines) định nghĩa các cột của lưới. Chúng được tạo ra bởi thuộc tính grid-template-columns trên grid container.

Khái niệm

• Grid Column: Không gian giữa 2 đường dọc liền kề (column track)
• Grid Column Line: Đường dọc ranh giới cột (đánh số 1, 2, 3... từ trái sang phải)
• Column Track: Cột thực tế chứa content

Định nghĩa cột với grid-template-columns

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr 100px; /* 4 cột */
  /* Hoặc */
  grid-template-columns: repeat(3, 1fr);     /* 3 cột bằng nhau */
  /* Hoặc */
  grid-template-columns: minmax(200px, 1fr) 2fr; /* Responsive */
}

Ví dụ minh họa (từ hình ảnh)

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 150px 1fr 150px; /* 3 cột: cố định - linh hoạt - cố định */
      gap: 20px;
      padding: 20px;
      background: #f8f9fa;
    }
    .container > div {
      background: #3498db;
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>Sidebar trái (150px)</div>
    <div>Nội dung chính (1fr)</div>
    <div>Sidebar phải (150px)</div>
  </div>
</body>
</html>

Đặt item trên cột cụ thể

.item {
  grid-column-start: 2;  /* Bắt đầu từ line 2 */
  grid-column-end: 4;    /* Kết thúc tại line 4 (trải 2 cột) */
  /* Shorthand: */
  grid-column: 2 / 4;
  /* Hoặc span: */
  grid-column: 2 / span 2;
}

Responsive Columns với auto-fit/minmax

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
/* Tự động: 1 cột mobile, 2 cột tablet, 3+ cột desktop */

Grid Lines đặt tên (Named Lines)

.container {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.content { grid-column: content-start / content-end; }