CSS Grid中不完整行的元素居中布局策略

.service-option-container {
    margin: 1em 0 4em 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列，每列等宽 */
    column-gap: 1em;
    row-gap: 1em;
    justify-content: center; /* 此属性作用于网格轨道而非网格项 */
}

.service-option-card {
    border: 1px solid black;
    border-radius: 20px;
    padding: 1em;
    /* 这里的margin-left/right会影响布局，通常建议使用gap */
    margin-left: 1em; 
    margin-right: 1em;
}

<div class="service-option-container">
  <div class="service-option-card">Card Contents 1</div>
  <div class="service-option-card">Card Contents 2</div>
  <div class="service-option-card">Card Contents 3</div>
  <div class="service-option-card">Card Contents 4</div>
  <div class="service-option-card">Card Contents 5</div>
</div>

▢ ▢ ▢
▢ ▢

|---|---|---|
|x1 |x2 |x3 |
|---|---|---|
|x4 |x5 |   |
|---|---|---|

|---|---|---|---|
|x1 |x2 |x3 |   |  (假设存在第四列或更宽的容器)
|---|---|---|---|
|   |x4 |x5 |   |
|---|---|---|---|

.service-option-card {
    /* ... 现有样式 ... */
    &:nth-last-child(1), /* 倒数第一个元素 */
    &:nth-last-child(2) { /* 倒数第二个元素 */
        transform: translateX(50%); /* 向右偏移自身宽度的50% */
    }
}

<div class="service-option-group"> <!-- 新增一个容器来包裹所有行 -->
  <div class="card-row">
    <div class="service-option-card">Card Contents 1</div>
    <div class="service-option-card">Card Contents 2</div>
    <div class="service-option-card">Card Contents 3</div>
  </div>
  <div class="card-row">
    <div class="service-option-card">Card Contents 4</div>
    <div class="service-option-card">Card Contents 5</div>
  </div>
  <div class="card-row"> <!-- 示例：处理只有1个元素的情况 -->
    <div class="service-option-card">Card Contents 6</div>
  </div>
</div>

/* 移除 .service-option-container 的 grid 属性，因为它现在是行的父容器 */
/* 如果 .service-option-group 需要是网格项，则保持其父容器的grid设置 */
.service-option-group {
    /* 假设此容器占据了页面应有的宽度，例如100%或max-width */
    margin: 1em auto 4em auto; /* 居中整个卡片组 */
    display: flex; /* 让行垂直堆叠 */
    flex-direction: column;
    gap: 1em; /* 行之间的间距 */
}

.card-row {
    display: flex; /* 启用Flexbox布局 */
    justify-content: center; /* 水平居中行内元素 */
    gap: 1em; /* 卡片之间的间距，替代了卡片上的margin-left/right */
    flex-wrap: wrap; /* 如果卡片过多，允许换行 */
}

.service-option-card {
    border: 1px solid black;
    border-radius: 20px;
    padding: 1em;
    /* 计算卡片宽度，使其在3列布局中占据1/3空间，同时考虑间距 */
    /* 假设父容器 .card-row 的宽度为100% */
    flex: 0 0 calc((100% - 2 * 1em) / 3); /* 2 * 1em 是两列间隙 */
    box-sizing: border-box; /* 确保padding和border不增加额外宽度 */
    min-width: 200px; /* 示例：防止在小屏幕下过小 */
    /* 移除原有的 margin-left/right */
}

/* 针对只有1个卡片的行，如果需要特殊处理，例如宽度不是1/3，可以添加类 */
/* .card-row.single-item .service-option-card {
    flex: 0 0 auto;
    width: 300px; 
} */