Four Card Features Section using CSS GRID

Community feedback

• 

  P

  Øystein Håberg•10,410

  @Islandstone89Posted 10 months ago

  Hey, good job! Here is some feedback.

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Wrap all of your content in a <main>.

  • The card icons are decorative, so the alt text should be empty:alt="".

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • There shouldn't be a need for margin on any of the cards. I inspected your Grid in DevTools, and saw that you only had 3 rows, which is causing the need to set a margin on .team and .karma. This layout needs 4 rows to work. Sometimes it's best to be very explicit, and tell the browser exactly how many rows and columns we want. First, I would set up the columns and rows on the .card-box:

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  
  

  Then, we must slightly adjust the placement of the cards in the rows - we need to declare not only where they start, but also where they end. By default, it will span only 1 cell, therefore we must explicitly set the cards to take up more than 1 cell:

  .supervisor {
    grid-row: 2 / 4;
  }
  .team {
    grid-row: 1 / 3;
  }
  .karma {
    grid-row: 3 / 5;
  }
  .calculator {
    grid-row: 2 / 4;
  }
  

  NB: Remember, grid rows and columns are indexed by the lines, not the cells. That's why we use 5 and 4 in a grid with 4 rows and 3 columns.

  NB 2: You only need one media query, and it must be in rem, not px. I would make the layout switch before it hits 1000px - try around 50rem, which equals to 800px.

  Hope this helps :)

  0