Four card feature designed with CSS grid

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. 🙂