如何用CSS在CSS Grid多列间添加垂直分隔线并修复布局问题？

我正在开发一个展示应用统计数据的网页，计划使用CSS Grid将统计内容布局为4列——左侧放置图片，右侧排列三个文本统计项，同时在列之间添加垂直分隔线以实现视觉区分。但现有代码未达到预期效果，需要修复。

现有代码 #

HTML代码 #

<div class="stats__number">
  <img
    src="img/d4d-3d.png"
    alt="3D logo of D4D Offers app in middleeast"
    class="stats__number_img"
  />
  <img
    src="img/download.svg"
    alt=""
    class="stats__number_svg download_svg vertical_line"
  />
  <span class="stats__number_text download_text vertical_line">
    <span class="stats__number_text_main color_primary">6 M+</span
    >Downloads</span
  >
  <img
    src="img/star.svg"
    alt=""
    class="stats__number_svg star_svg vertical_line"
  />
  <span class="stats__number_text star_text vertical_line">
    <span class="stats__number_text_main">4.5</span>Star Rating
  </span>
  <img
    src="img/review.svg"
    alt=""
    class="stats__number_svg review_svg vertical_line"
  />
  <span class="stats__number_text review_text vertical_line">
    <span class="stats__number_text_main">87 K+</span>Reviews
  </span>
</div>

CSS代码 #

.stats { 
  grid-column: full-start/full-end; 
  padding: 10% 15%; 
  position: relative; 
}
.stats__img {
  position: absolute;
  left: -13%;
  top: 16%;
  width: 26%;
}

.stats__number {
  display: grid;
  place-items: center center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 10rem);
}
.stats__number_img {
  position: relative;
  top: -10%;
  height: 25rem;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  justify-self: end;
}
.stats__number_svg {
  height: 7rem;
  width: 7rem;
}
.stats__number_svg.star_svg {
  width: 16rem;
  height: 16rem;
  filter: none;
}
.stats__number_svg.review_svg {
  width: 9rem;
  height: 9rem;
  filter: none;
}
.stats__number_text {
 font-size: 1.6rem;
 font-weight: 700;
 text-align: center;
 line-height: 1.6;
}
.stats__number_text_main {
  font-weight: 700;
  font-size: 2.4rem;
  display: block;
}
.stats__number_text.download_text {
  grid-column: 2/3;
  grid-row: 2/3;
}
.stats__number_text.star_text {
  grid-column:3/4; 
  grid-row:2/3; 
}
.stats__number_text.review_text { 
  grid-column:4/5; 
  grid-row:2/3; 
}

解决方案 #

1. 重构Grid容器布局 #

将每个统计项的图标与文本归到同一网格列，简化Grid结构：

.stats__number {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr); /* 左侧图片占1份，三个统计项各占1份 */
  align-items: center;
  gap: 2rem; /* 列间距，用于放置分隔线 */
  position: relative; /* 为伪元素分隔线提供定位基准 */
}

2. 定位统计项图标与文本 #

让每个SVG图标和对应的文本处于同一列，自然上下排列：

/* 定位SVG图标 */
.stats__number_svg.download_svg {
  grid-column: 2/3;
  justify-self: center;
}
.stats__number_svg.star_svg {
  grid-column: 3/4;
  justify-self: center;
}
.stats__number_svg.review_svg {
  grid-column: 4/5;
  justify-self: center;
}

/* 调整文本位置，移除固定行 */
.stats__number_text.download_text {
  grid-column: 2/3;
  grid-row: auto;
}
.stats__number_text.star_text {
  grid-column: 3/4;
  grid-row: auto;
}
.stats__number_text.review_text {
  grid-column: 4/5;
  grid-row: auto;
}

3. 用CSS伪元素实现垂直分隔线 #

替代原有的SVG分隔线，避免错位问题：

.stats__number::before,
.stats__number::after {
  content: '';
  position: absolute;
  height: 60%; /* 自定义分隔线高度 */
  width: 1px;
  background-color: #e0e0e0; /* 自定义分隔线颜色 */
  top: 50%;
  transform: translateY(-50%);
}
/* 第一个分隔线：左侧图片与下载统计之间 */
.stats__number::before {
  left: calc(25% + 1rem);
}
/* 第二个分隔线：下载与评分统计之间 */
.stats__number::after {
  left: calc(50% + 1rem);
}

同时移除HTML中所有vertical_line类。

4. 优化元素对齐与尺寸 #

• 调整左侧图片垂直居中，移除偏移：

.stats__number_img {
  height: 25rem;
  grid-column: 1 / 2;
  justify-self: end;
  align-self: center;
  /* 移除position: relative和top: -10% */
}

• 缩小SVG图标尺寸，避免占用过多空间：

.stats__number_svg.star_svg {
  width: 8rem;
  height: 8rem;
}
.stats__number_svg.review_svg {
  width: 7rem;
  height: 7rem;
}

5. 优化文本样式 #

让统计数字与描述文本更紧凑：

.stats__number_text_main {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
}
.stats__number_text {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

修改后的完整代码 #

HTML代码 #

<div class="stats__number">
  <img
    src="img/d4d-3d.png"
    alt="3D logo of D4D Offers app in middleeast"
    class="stats__number_img"
  />
  <img
    src="img/download.svg"
    alt="Download icon"
    class="stats__number_svg download_svg"
  />
  <span class="stats__number_text download_text">
    <span class="stats__number_text_main color_primary">6 M+</span>
    Downloads
  </span>
  <img
    src="img/star.svg"
    alt="Star rating icon"
    class="stats__number_svg star_svg"
  />
  <span class="stats__number_text star_text">
    <span class="stats__number_text_main">4.5</span>
    Star Rating
  </span>
  <img
    src="img/review.svg"
    alt="Review icon"
    class="stats__number_svg review_svg"
  />
  <span class="stats__number_text review_text">
    <span class="stats__number_text_main">87 K+</span>
    Reviews
  </span>
</div>

CSS代码 #

.stats { 
  grid-column: full-start/full-end; 
  padding: 10% 15%; 
  position: relative; 
}
.stats__img {
  position: absolute;
  left: -13%;
  top: 16%;
  width: 26%;
}

.stats__number {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  align-items: center;
  gap: 2rem;
  position: relative;
}
.stats__number_img {
  height: 25rem;
  grid-column: 1 / 2;
  justify-self: end;
  align-self: center;
}
.stats__number_svg {
  height: 7rem;
  width: 7rem;
}
.stats__number_svg.star_svg {
  width: 8rem;
  height: 8rem;
  filter: none;
}
.stats__number_svg.review_svg {
  width: 7rem;
  height: 7rem;
  filter: none;
}
.stats__number_text {
 font-size: 1.4rem;
 font-weight: 700;
 text-align: center;
 line-height: 1.2;
}
.stats__number_text_main {
  font-size: 2.8rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}
.stats__number_text.download_text {
  grid-column: 2/3;
  grid-row: auto;
}
.stats__number_text.star_text {
  grid-column:3/4; 
  grid-row: auto;
}
.stats__number_text.review_text { 
  grid-column:4/5; 
  grid-row: auto;
}

/* 垂直分隔线 */
.stats__number::before,
.stats__number::after {
  content: '';
  position: absolute;
  height: 60%;
  width: 1px;
  background-color: #e0e0e0;
  top: 50%;
  transform: translateY(-50%);
}
.stats__number::before {
  left: calc(25% + 1rem);
}
.stats__number::after {
  left: calc(50% + 1rem);
}

内容的提问来源于stack exchange，提问作者MR. UNBOX