3-column-preview card component (use flexbox, how to use grid?)

Community feedback

• 

  Tiago BW•210

  @tiagobwPosted over 2 years ago

  Hi Nguyen,

  For the Desktop view:

  1 To use CSS Grid instead of Flexbox, change the main styles to:

  main {
      display: grid;
      grid-template-columns: repeat(3, 20rem);
  }
  

  For the mobile view:

  1 To use CSS Grid instead of Flexbox, change the main styles to:

  main {
      display: grid;
      grid-template-columns: 20rem;
  }
  

  2 @Hersonmei's answer is already great.

  I hope that helps.

  Have a great day. :)

  Marked as helpful

  0

  ---

  

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  @tiagobw thank you. it's very helpful :D

  1
• 

  Herson•220

  @HersonmeiPosted over 2 years ago

  2 - To center your main on the page, you can apply the flex display in the body.

  Your body will look like this:

  body {
    font-family: "Lexend Deca", sans-serif;
    font-size: 1rem;
    background-color: var(--very-light-gray);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  

  Marked as helpful

  0

  ---

  

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  @Hersonmei thank you. Not sure why I never thought of that :)

  1
• 

  xZAYEDx•250

  @xZAYEDxPosted over 2 years ago

  Good job on completing the challenge. For the attribution div you need to add it inside a footer tag like this 👇🏽 that is after closing the main tag.

  <footer>
   <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/jesuisbienbien?tab=repositories">Nguyen Nguyen</a>.
    </div>
  </footer>
  

  Just copy paste the above code 👆🏽 in your HTML file I have made it ready for you😁

  Marked as helpful

  0

  ---

  

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  @xZAYEDx thank you

  1