CSS网格-垂直对齐列中的项目

我有一个有趣的设计要实现，我尝试使用CSS网格来编码它。起初，我尝试使用Isotope JS来获得相同的布局，但没有任何成功。我最接近的设计是使用CSS网格。
我总共有7个从for loop动态生成的项目。它们需要被分成3列和3行。前两列应该各有两个项目，最后一列应该有其余的3个项目。前两列也有一点奇怪的间距。我设法使第一列，但没有成功与中间列垂直对齐的项目。
下面是我需要实现的布局的图像：

以下是我到目前为止所尝试的：

.pr-soft-masonry-layout {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}

.grid-item-1 {
  grid-row: 1 / 3;
}

.grid-item-2 {
  grid-column: 1 / 2;
  grid-row: 3/-1;
  justify-self: end;
  margin-top: -300px;
}

.grid-item-3 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.grid-item-4 {
  grid-column: 2 / 2;
}

.grid-item-5 {
  grid-row: 1 / 2;
  grid-column: 3 / 3;
}

/* .grid-item-6 {
   grid-row: 3 / -1;
} */

.grid-item-7 {
  grid-column: 3 / 3;
}

.pr-soft-masonry-card {
  /*   height: 280px; */
  padding: 30px;
  border-radius: 30px;
  /*   width: 425px; */
}

.pr-soft-masonry-title {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 44px;
  line-height: 53px;
}

.pr-soft-masonry-featured-number {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 90px;
  line-height: 108px;
  margin-bottom: 20px;
}

.pr-soft-masonry-card p {
  font-family: 'Rza';
  font-style: normal;
  font-weight: 505;
  font-size: 20px;
  line-height: 23px;
}

<div class="pr-soft-masonry-layout grid">
  <div style="background-color: #FFB79B; width: 427px;" class="pr-soft-masonry-card grid-item-1">
    <div style="#5E3313" class="pr-soft-masonry-title">
      A sneak peak of the data you’ll discover in the study
    </div>
  </div>
  <div style="background-color: #5E3313; width: 312px;" class="pr-soft-masonry-card grid-item-2">
    <div style="color: #FDDAAB" class="pr-soft-masonry-featured-number">
      75%
    </div>
    <p style="color: #FFF;">marks the satisfaction score among professionals who utilize Chat GPT for work</p>
  </div>
  <div style="background-color: #E4E1FD; width: 426px;" class="pr-soft-masonry-card grid-item-3">
    <div style="color: #4C3FD5" class="pr-soft-masonry-featured-number">
      44%
    </div>
    <p style="color: #000;">of PR Pros find the media database to be the most valuable solution</p>
  </div>
  <div style="background-color: #92C34B; width: 426px;" class="pr-soft-masonry-card grid-item-4">
    <div style="color: #E8F5D4" class="pr-soft-masonry-featured-number">
      #1
    </div>
    <p style="color: #FFF;">threat posed by AI according to PR&nbsp;practitioners are manipulation and&nbsp;fake news</p>
  </div>
  <div style="background-color: #FDDAAB; width: 314px;" class="pr-soft-masonry-card grid-item-5">
    <div style="color: #FF7E4D" class="pr-soft-masonry-featured-number">
      #1
    </div>
    <p style="color: #5E3313;">problem: getting journalists to respond</p>
  </div>
  <div style="background-color: #E8F5D4; width: 426px;" class="pr-soft-masonry-card grid-item-6">
    <div style="color: #92C34B" class="pr-soft-masonry-featured-number">
      76%
    </div>
    <p style="color: #000;">foresee critical thinking to be a&nbsp;paramount PR skill for the future</p>
  </div>
  <div style="background-color: #FF7E4D; width: 314px;" class="pr-soft-masonry-card grid-item-7">
    <div style="color: #FDDAAB" class="pr-soft-masonry-featured-number">
      48%
    </div>
    <p style="color: #000;">of PR practitioners struggle with tight budgets</p>
  </div>
</div>

我同意@ralph.m的评论，你需要更多的行。在这个代码片段中，我使用了10行。请注意，每个网格项至少跨越三行。

let s = ''
for (i = 0; i < 7; i++) {
  const n = Math.floor(Math.random() * 256);  
  s += `<div style="background: hsl(${n},50%,50%);">${i + 1}</div>`
}
document.querySelector('.d1').innerHTML = s

.d1 {
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 10em);
  grid-template-rows: repeat(10, 1em);
  gap: 1em;
}
.d1>div {
  border-radius: 5px;
  padding: 1em;
  box-sizing: border-box;
}
.d1>div:nth-child(1) {
  grid-column: 1;
  grid-row: 2 / span 3;
}
.d1>div:nth-child(2) {
  grid-column: 1;
  grid-row: 5 / span 4;
  width: 7em;
  justify-self: end;
}
.d1>div:nth-child(3) {
  grid-column: 2;
  grid-row: 3 / span 3;
}
.d1>div:nth-child(4) {
  grid-column: 2;
  grid-row: 6 / span 4;
}
.d1>div:nth-child(5) {
  grid-column: 3;
  grid-row: 1 / span 3;
  width: 7em;
}
.d1>div:nth-child(6) {
  grid-column: 3;
  grid-row: 4 / span 4;
}
.d1>div:nth-child(7) {
  grid-column: 3;
  grid-row: 8 / span 3;
  width: 7em;
}

<div class="d1"></div>

CSS网格-垂直对齐列中的项目

1条答案

相关问题

热门标签

最新问答