Four card feature designed with CSS grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, WondaBwoy Kelvin! 👋

  About the problem, I recommend trying to simplify the grid. I think it only needs 2 rows instead of 5 rows. Also, for the column, it only needs 3 columns instead of 5 columns.

  After that, try to make the "Calculator" and "Supervisor" cards spanning the two rows. Also, make the items centered vertically.

  I was solving the layout with Flexbox. So, I am not sure how to do that with Grid. Sorry, I can't give the exact answer to the problem. 😅

  My solution is an old solution — vanzasetia/four-card-feature-section: A nice challenge from Frontend Mentor

  Here are a few ways you can do to improve this solution.

  • "Reliable, efficient delivery powered by technology" should be wrapped by <h1>. It is one sentence, not two sentences. You can wrap the text with <span> to move the text to the next line by making the <span> a block element.
  • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.
  • All the icons are decorative images. So, leave the alternative text empty (alt="").

  I hope this helps. 🙂

  Marked as helpful

  0