Three-column-preview-card-component using CSS Grid

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Oubaid, I think you did a great job :) I did this challenge a while back, I just had a look at it to see what I did; I saw that I mainly added margin at the bottom of elements to space them. I'm pretty sure if I were to do it again, I'd definitely do things differently. For the desktop view, I would use flexbox with gap to space out things (since flexbox gap has over a 90% usage by now), and then for the last item, I'd put a margin-top: auto to push it to the bottom, a bit like this:

  .card {
    min-height: 30rem;
  }
  
  section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    // or margin-bottom: 1rem instead
  }
  
  .cta {
    margin-top: auto;
  }
  

  For the HTML, it'll just be pretty straightforward, probably no containers since none of the children need more containers for alignment.

  <section>
     <img>
     <h2></h2>
     <p></p>
     <a href="#" class="cta"></a>
  </section>
  

  Once again, well done, and great questions for discussion 🙂

  13

  Marked as helpful
• 

  Shard Codes•430

  @Shard-Codes

  Posted almost 3 years ago

  Hello Oubaid, You great job on the challenge

  Here are some tips to improve your solution.

  • On the body tag add a min-height of 100vh like this.

  body {
     background-color: var(--clr-very-light-gray);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      min-height: 100vh; /* Add this */
  }
  

  • On your container div remove the margin and min-height you set like this.

  .container {
      display: grid;
      overflow: auto;
      margin: 5rem 1.5rem; /* Remove this */
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      min-height: 30rem; /* Remove this */
      border-radius: 0.5rem;
  }
  

  And also remove the min-height on your column element, as well.

  And with that, you should be set Happy coding 😊

  13