Responsive Web Design Projects - Build a Product Landing Page-- Aligning icons with text using Grid

Responsive Web Design Projects - Build a Product Landing Page-- Aligning icons with text using Grid
0
#1

I designed the landing page assignment using CSS Gid. I was unable to align the icons with the text and keep all the icons aligned. I ultimately completed using a table, but wanted to see if there was some aspect of Grid I was not unserstanding. Here is my codepen:

Thanks for any help!

0 Likes

#2

You are definitely using grid wrong. Also, if you are going to use grid-template-areas give them some meaningful names.

Check out the Grid course by Wes Bos, read the Grid docs on MDN and check out the CSS Tricks article.

Here is a quick example of the grid for the icons and text

0 Likes

#3

Thanks so much. I will check out the references.

0 Likes