最後一行移除下邊框

說明：本檔案示範在三欄（每行 3 個）或類似欄位佈局中，如何使用 SCSS 選擇器移除最後一行或不足欄數項目的下邊框，避免出現多餘的分隔線。

移除最後一行（或最後幾個）項目的下邊框

下方為一個三欄式（每行 3 個）的 SCSS 範例，用以示範如何在最後一行移除下邊框：

.three-part {
  /* 需自行建立三欄佈局，nth-child 的欄位假設才成立 */
  display: flex;
  flex-wrap: wrap;
  > div {
    width: calc(100% / 3);
    /* 使用下邊框（底部分隔線） */
    border-bottom: 1px solid #ccc;
    &:nth-last-child(1) {
      /* 只有一個元素時移除下邊框 */
      border-bottom: none;
    }
    &:nth-last-child(2) {
      &:nth-child(3n + 1),
      &:nth-child(3n + 2) {
        /* 倒數第二格：第一欄(3n+1，最後一行 2 格時) 或 第二欄(3n+2，最後一行 3 格時的中間格)，皆屬最後一行 */
        border-bottom: none;
      }
    }
    &:nth-last-child(3) {
      &:nth-child(3n + 1) {
        /* 最後一行剛好三個元素時，補上第一個位置；另兩格已由 nth-last-child(1)/(2) 命中 */
        border-bottom: none;
      }
    }
  }
}

上面的 SCSS 範例用於三欄式排列（每行 3 個項目）的情況，目的是在最後一行（不足 3 個或剛好 3 個的情況）移除不必要的邊框，避免在項目結尾出現多餘的分隔線。

主要想法：

• 當只有 1 個元素在最後一行：移除該元素的邊框（:nth-last-child(1)）。
• 當最後一行有 2 個元素時：最後一格由 :nth-last-child(1) 命中；倒數第二格落在第一欄（3n + 1），由 :nth-last-child(2) + 3n + 1 命中。（3n + 2 分支不在此情況觸發，它負責下方三格情況的中間格。）
• 當最後一行有 3 個元素時：三格都會被移除——第三格由 :nth-last-child(1)、第二格由 :nth-last-child(2) + 3n + 2、第一格由 :nth-last-child(3) + 3n + 1 各自命中，三條規則合起來涵蓋整列。

補充：上面是硬列舉式寫法（逐一處理最後一行 1／2／3 個的情況）。更通用的慣用法是用 :nth-child(3n + 1):nth-last-child(-n + 3) 配 ~ div 一次標出整個最後一行，較易維護。