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 用於組件內部排列。