testimonials-grid-section-main-component.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello MAHMOUD, congratulations for your solution!

  The best approach for this solution is using GRID instead of FLEX. To build this with flex you'll much more work and code to write in comparison with grid.

  The best way to build this is inserting the property display: grid; inside the container, one general class for the card setting all the paddings and width.

  Inside the container you should add display: grid; and grid-template-columns: repeat(4, 1fr); max-width: 1110px; to create a grid with 4 columns and maximum width of 1110px.

  Then you should use the property column-span: span 2 and row-span: span 2; for the columns that are bigger than the others for example, the purple and black card and the vertical white card.

  When you finish the desktop version, you can add a @media query changing the grid-template-columns: 1fr; for a single column design.

  If you're not familiar to GRID I suggest you read the documentation: https://www.w3schools.com/css/css_grid.asp

  I build my solution using the GRID approach, if you want to use my code as a reference, here's the solution: https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN

  Hope it helps, congratulations!

  Marked as helpful

  0

  ---

  

  mahmoud medhat•180

  @MahmoudKasrawyPosted over 2 years ago

  @correlucas thanks sir 💛

  1