Responsive Testimonial Grid Layout

Community feedback

• 

  Marzia Jalili•9,750

  @MarziaJalili

  Posted 4 months ago

  Fantasticoo! 💯

  ✅ Using the grid-template-areas can be a very concise approach, man. And, for naming the element you can the :nth-child() selector. You are asked to provide it the placement of the element in html.

  ✅ In order for grid-template-areas property to work, you are required to set the grid-area in each testimonial element.

  • Take the code below as an example for html:

  <ul class="testimonial-parent">
    <li class="testimonial">(the details of the Denail)</li>
    <li class="testimonial">(the details of the Janathan)</li>
    <li class="testimonial">(the details of the Jeanette)</li>
    <li class="testimonial">(the details of the Pattric)</li>
    <li class="testimonial">(the details of the Kira)</li>
  </ul>
  

  It is better to use the ul and li elements cause they somehow represent a list, bro.

  • Then, apply the code below in css:

  
  /* give each child element a name for grid-area */
  
  .testimonial:nth-child(1) {
    grid-area: one;
  }
  
  .testimonial:nth-child(2) {
    grid-area: two;
  }
  
  .testimonial:nth-child(3) {
    grid-area: three;
  }
  
  .testimonial:nth-child(4) {
    grid-area: four;
  }
  
  .testimonial:nth-child(5) {
    grid-area: five;
  }
  
  /* set the grid-template-areas on the parent element*/
  
  /* for mobile */
  
  .testimonial-parent {
     display: grid;
     gap: 1rem;
     grid-template-areas: 
      "one"
      "two"
      "three"
      "four"
      "five"
     ;
  }
  
  /* for tablet */
  
  @media (min-width: 30em) {
    .testimonial-parent {
       grid-template-areas: 
         "one one"
         "two three"
         "four four"
         "five five"
       ;
    }
  }
  
  /* for desktop */
  
  @media (min-width: 60em) {
    .testimonial-parent {
      grid-template-areas: 
        "one one two five"
        "three four four five"
      ;
    }
  }
  

  You're solution is flawless though!

  😁😁😁

  12

  Marked as helpful