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

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. :)

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;
}

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😁