Testimonials Grid Section

Community feedback

• 

  P

  Genildo Cerqueira Souza•470

  @GenildocsPosted 3 months ago

  Hello, congratulations on completing the challenge.
  Here are some tips for you:

  • In the grid, there’s a property called auto-fit that automatically reorganizes grid items according to their size. It might be interesting for you to try it out instead of switching to display: flex for mobile device resolutions.
  • Example:

  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    row-gap: 25px;
  }
  

  • To use this property, it's mandatory to have minmax for the grid items.

  If this approach isn’t suitable, you could start by creating the grid for mobile devices first and then use media queries to adjust the columns.

  • Example:

  .container {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 25px;
  }
  .card {
    width: 300px;
    height: 300px;
    background-color: #ea7777;
    border: 1px solid black;
  }
  
  @media (min-width: 768px) {
    .container {
      grid-template-columns: repeat(4, 1fr);
      column-gap: 25px;
    }
  }
  

  I hope these tips can help you.

  Marked as helpful

  0