Testimonials Grid Section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @CHEN-YiWen, some suggestions to improve you code:

  Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.

  Here is how it looks like fully implemented: EXAMPLE

  Desktop View Code:

  .testimonial-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "daniel daniel jonathon kira"
        "jeanette patrick patrick kira";
      gap: 30px;
    }
  
    .daniel-card {
      grid-area: daniel;
    }
    .jonathan-card {
      grid-area: jonathon;
    }
  
    .jeanette-card {
      grid-area: jeanette;
    }
  
    .patrick-card {
      grid-area: patrick;
    }
  
    .kira-card {
      grid-area: kira;
    }
  

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  Hi @vcarames! Thank you so much for the suggestion! I will give grid-template-areas a try!

  0