CSS Grid for Product Landing Page

1

Hello I have been having issues trying to figure out what I have done wrong with my grid. I’ve attempted debugging to see if the issue I’m having is related to padding or margin properties but haven’t seen anything.

I am trying to have each section take over a full row of my single column grid. (My grid started out as two columns and I was initially going to have a section in opposite columns going down the rows but that proved to be a dumb way of doing things, or maybe I executed it incorrectly.)

So I decided to create a single column grid and want to set justify-self property to “start” and “end” on every other section element. So i have tried that and for some reason in the top first two sections my background colors are fit around the divs so we can see the white colored background behind the elements on the side of them.

Then my last two sections aren’t even phased by “justify-self” property, and remain in the same position.

Please someone show me the way. Lol

Here is the link to my code pen. - https://codepen.io/marieensalada/full/oNXBogO

2

I think you should specify each sections into their respective rows and columns. In case, you don’t know the appropriate grid-column size, I think assigning the value of auto will help create responsiveness of the said column. Again, using the grid-template-areas property will enable you to layout your grid more effectively.

3

I did attempt to use the grid-template-area property BUT I tried to use it when I was still set on having two columns. I am going to try using it again with the single column and see if that does the trick.

I’ll let you know how it works! Fingers crossed.

Also on an unrelated note, hope everyone’s keeping their fingers and keyboards germ free. /’(0.0)’\

4

Hey thanks! That got it better looking!

1 Like