Testimonials Grid

Community feedback

• 

  P

  Vishika•400

  @VishikaPosted 5 months ago

  Fantastic solution! I also used .card:nth-child(n) to target the different cards instead of using class variants of .card i.e .card--black, .card--black-blue etc

  You've specified the grid positions to a very fine level of detail, personally I told certain cards to span, and gave some of them orders to achieve a look. This allowed me to use less CSS and give a couple more interim layouts between the mobile and desktop sizes suggested to make it more responsive

  @media (min-width: calc(720em / 16)) {
    .testimonials {
      grid-template-columns: 1fr 1fr;
    }
  
    .testimonial:nth-child(1) {
      grid-column: span 2;
    }
  
    .testimonial:nth-child(4) {
      grid-column: span 2;
    }
  
    .testimonial:nth-child(5) {
      grid-row: span 2;
    }
  
    .testimonial:nth-child(3) {
      order: 1;
    }
  
    .testimonial:nth-child(4) {
      order: 2;
    }
  }
  
  @media (min-width: calc(1080em / 16)) {
    .testimonials {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .testimonial:nth-child(3) {
      order: 3;
    }
  }
  
  @media (min-width: calc(1440em / 16)) {
    .testimonials {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
    .testimonial:nth-child(3) {
      order: 1;
    }
  }
  

  0