CSS Grid 項目屬性

Grid 項目（容器內的子元素）有專屬的屬性，用來控制項目的位置和跨越範圍。

grid-column 和 grid-row

用格線編號指定項目的位置和跨越範圍。

指定起始和結束格線

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* 縮寫 */
.item {
  grid-column: 1 / 3;    /* 從第 1 條線到第 3 條線（佔 2 欄） */
  grid-row: 1 / 2;       /* 從第 1 條線到第 2 條線（佔 1 行） */
}

格線編號從 1 開始，也可以用負數從尾端計算（-1 是最後一條線）。

span 關鍵字

用 span 指定要跨越的軌道數量。

.item {
  grid-column: 1 / span 2;    /* 從第 1 條線開始，跨 2 欄 */
  grid-column: span 2;        /* 跨 2 欄（位置自動） */
  grid-row: 2 / span 3;       /* 從第 2 行開始，跨 3 行 */
}

佔滿整行或整列

.full-width {
  grid-column: 1 / -1;    /* 從第一條線到最後一條線 */
}

grid-area

用於 grid-template-areas

配合容器的 grid-template-areas 使用：

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

作為縮寫

grid-area 也可以作為位置的縮寫：

.item {
  grid-area: 1 / 1 / 3 / 4;
  /* 等同於：
     grid-row-start: 1;
     grid-column-start: 1;
     grid-row-end: 3;
     grid-column-end: 4;
  */
}

順序是：row-start / column-start / row-end / column-end

justify-self

覆蓋容器的 justify-items，設定單一項目的「水平」對齊。

.item {
  justify-self: start;     /* 靠左 */
  justify-self: end;       /* 靠右 */
  justify-self: center;    /* 置中 */
  justify-self: stretch;   /* 拉伸填滿（預設） */
}

align-self

覆蓋容器的 align-items，設定單一項目的「垂直」對齊。

.item {
  align-self: start;       /* 靠上 */
  align-self: end;         /* 靠下 */
  align-self: center;      /* 置中 */
  align-self: stretch;     /* 拉伸填滿（預設） */
}

place-self

align-self 和 justify-self 的縮寫。

.item {
  place-self: center;           /* 水平垂直都置中 */
  place-self: start end;        /* 垂直靠上，水平靠右 */
}

實用範例

跨越多欄

.wide-item {
  grid-column: span 2;    /* 佔兩欄 */
}

.full-width {
  grid-column: 1 / -1;    /* 佔滿整行 */
}

跨越多行

.tall-item {
  grid-row: span 2;    /* 佔兩行 */
}

大卡片

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

指定位置

/* 放在第二欄第二行 */
.specific {
  grid-column: 2;
  grid-row: 2;
}

響應式區域

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

相簿佈局

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

/* 特色圖片 */
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

項目置中

.centered {
  justify-self: center;
  align-self: center;
}

/* 或 */
.centered {
  place-self: center;
}

彈出式定位

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

/* 重疊放置 */
.overlay {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 1;
}

Grid vs Flexbox 選擇

兩者可以搭配使用：Grid 用於整體頁面佈局，Flexbox 用於組件內部排列。