Grid help with CSS Portfolio Project

1

Hey guys,

I am having some difficulty getting a grid system to work within a div. My entire page is a grid which worked fine: https://codepen.io/jamster1/pen/KXgpmB, but when trying to employ another grid, within it, it doesn’t seem to work. I have placed the section with just the grid at this link: https://codepen.io/jamster1/pen/LzzRQY to test out what could be wrong, but I am unable to figure it out. I have tried many things such as subgrid, inline-grid, changing postion, display…etc. Any help or guidance would be much appreciated! To be more detailed, I am using the h1 hello elements as a substitute for now, but they appear to the right of the div called portfolio holder, instead of in it.

2

Two things. First, I clicked on “tidy CSS” because there seemed to be a lot of inconsistent spacing.

Second, there was a syntax error.

On line 122 of your first codepen link it says:

grid-template-rows: [1row] 100%;

I used the inspector and saw it was an invalid property value.

I simply changed it to this:

grid-template-rows: [row1] 100%;

Here is a link to a fork I made of your pen:

Cheers!

1 Like
3

Thanks a lot for your help! I cant believe it was one small thing. I had seen that error message but wasn’t sure what it meant.

I hadn’t seen the tidy css button, but now ill be sure to use it.

Thanks again!

1 Like
4

No problem! Yea with CSS it is often one small thing :slight_smile: