在卡片上应用负边距以实现砌体效果

Question

我正在尝试实现如下所示的砌体效果：

如您所见，此布局中间的卡片 60px 高于周围的卡片。

为此，我尝试将 -60px margin 添加到中心卡片中，但它不起作用。

我看不出有什么方法可以使用 :nth-child(2n+1) 之类的东西来完成这项工作，例如，第 5 张牌不符合 css 规则。

这是解决它的最佳方法还是可以通过 css 网格实现，没有负边距？

.section {
  padding: 100px 0;
}

.card{
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.card__image {
  width: 100%;
  height: 467px;
  background-size: cover;
  background-repeat: no-repeat;
}


/* have tried below */

.card:nth-child(2){
  margin-top: -60px;
}

.section__card--2{
  margin-top: -60px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="section">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4 section__card section__card--1">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div class="col-12 col-md-4 section__card section__card--2">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--3">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


    </div>
  </div>
</section>

Answer 1

您的尝试非常接近。最好的办法是将行适当地分成 CSS 行（因为您已经使用 col-md-4 定义了每行 3 张图像的规则）。

因此，在您的 HTML 中，对于每 3 张图像，您可以使用自定义 class 将它们分成几行（例如：section__row）。按照您的风格，您只需添加：

.section__row > .section__card:nth-child(2){
  margin-top: -60px;
}

最终代码：

.section {
  padding: 100px 0;
}

.card{
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.card__image {
  width: 100%;
  height: 467px;
  background-size: cover;
  background-repeat: no-repeat;
}

.section__row > .section__card:nth-child(2){
  margin-top: -60px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="section">
  <div class="container">
    
    <div class="row section__row">
      <div class="col-12 col-md-4 section__card section__card--1">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div class="col-12 col-md-4 section__card section__card--2">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div class="col-12 col-md-4 section__card section__card--3">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
    </div>

    <div class="row section__row">
      <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
    </div>

  </div>
</section>

Answer 2

应用 margin-top 属性到 .section__card class.

.section {
  padding: 100px 0;
}

.card {
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.card__image {
  width: 100%;
  height: 467px;
  background-size: cover;
  background-repeat: no-repeat;
}


/* have tried below */

.section__card:nth-child(2) {
  margin-top:-60px;
}

.section__card:nth-child(5) {
  margin-top:-60px;
}

.section__card--2 {
  margin-top: -60px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="section">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-4 section__card section__card--1">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div class="col-12 col-md-4 section__card section__card--2">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--3">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--4">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--5">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div class="col-12 col-md-4 section__card section__card--6">
        <div class="card">
          <div class="card__image" style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


    </div>
  </div>
</section>

在卡片上应用负边距以实现砌体效果

Applying negative margins on cards to achieve masonry effect

html

css

sass