Responsive Preview Card using React, MUI and Typescript

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have a different suggestion.

  • The best way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

    Example:

    <div class="container">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    
    .container {
      max-width: 40rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr) /*  Creates two columns with equal width  */
    }
    

    With Flexbox Layout, you need to set the width of each div to 50% so that they will occupy equal amounts of space in the container.

     <div class="container">
       <div  class="column">Column 1</div>
       <div class="column">Column 2</div>
     </div>
     
     .container {
       max-width: 40rem;
       display: flex;
     }
    
     .column {
         width: 50%;
     }
    

  Happy coding!

  Marked as helpful

  0

  ---

  

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  @MelvinAguilar Got it! Thankyou so much, I shall try this on my upcoming challenges

  0
• 

  Engr. Fisayo Michael Animashaun (MNSE, FMP®, COREN)•340

  @fmanimashaunPosted almost 2 years ago

  Nice work @Gaurav4604!

  Using a grid will be overkill, as flexbox will do just right for the implementation. Generally speaking, a grid will be more suited for an overall page layout than trying to align elements in a component like a card example.

  Overall, you did a nice job with your implementation.

  Marked as helpful

  0

  ---

  

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  @fmanimashaun Thankyou so much for your response! I shall be moving onto Junior and Intermediate challenges soon, hope to apply grid logic there.

  0