Applying negative margins on cards to achieve masonry effect-CodePudding

I'm trying to achieve a masonry effect that looks something like this:

As you can see, the cards in the middle of this layout are 60px above the surrounding cards.

To achieve this, I've tried to add -60px margin to the center cards, but it doesn't work.

I can't see a way in which I can use something like :nth-child(2n 1) to make this work also, as the 5th card, for example, does not fit that css rule.

Is this the best way to about it or is this achievable via css grid, without negative margins?

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    <div >

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


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

CodePudding user response：

You were really close with your attempt. The best thing to do is to properly separate the rows into CSS rows (since you already defined the rule of 3 images per row with the col-md-4).

So, in your HTML, for every 3 images, you can separate them into rows with a custom class (for example: section__row). And in your style, you just add:

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

Final code:

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    
    <div >
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>
    </div>

  </div>
</section>

CodePudding user response：

Aplly margin-top property to .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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section >
  <div >
    <div >

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>

      <div >
        <div >
          <div  style="background-image: url( https://i.picsum.photos/id/219/200/300.jpg?hmac=RGnJfbO2380zLCFSj2tm_q0vW0wtw67d0fhWHX2IoDk ); "></div>
        </div>
      </div>


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