Testimonials-grid-section-main

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Piotrek1994, regarding you question:

  You definitely mix them. For this challenge you will only need flex for the author box. For the entire layout you will use CSS Grid.

  Some suggestions to improve you code:

  • You content is not responsive and this is because everything was built with fixed properties. You want to use responsive properties to your content can be responsive to multiple screens.

  • You also want to add a third layout to make the transition from mobile -> desktop views smoother.

  • If you use CSS Grid with Grid-Template-Areas it 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

  ---

  

  Piotr•250

  @Piotrek1994Posted about 2 years ago

  @vcarames Thannks a lot man, it a large dose of useful knowledge :)

  0
• 

  Stephen Gachoki•70

  @StegeekPosted about 2 years ago

  You can mix Grid with Flexbox. But you should use grid for the overall website layout and flexbox inside the divs.

  Marked as helpful

  0
• 

  John Omoke•240

  @jomoke814Posted about 2 years ago

  yes, you can combine both. Read this article https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a

  0