如何使用 css 在多个网格列之间绘制垂直线

问题描述 投票:0回答:0

我希望使用 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; 
}

这就是我要使用此代码实现的目标。任何帮助表示赞赏。 what I am looking to achieve 这是我使用上面的代码实现的what I achieved

css css-grid
© www.soinside.com 2019 - 2024. All rights reserved.