Help converting tribute to grid layout

Hi,

I hit a massive stumbling block with my tribute page last year, where I realised my layout was difficult to make responsive without breaking, due to using floats for formatting.

I’ve finally come back to FCC and set out to refactor it and to use grid instead but have really struggled to be able to apply it to my page, even though I had no problems completing the grid exercises here on FCC and got through Grid Garden without a hitch.

It ended up getting me down and has really hindered my progress (I had previously sailed though the Algorithms section and got the certification). I have read dozens of tutorials, forum posts, and have experimented for hours. I don’t usually give up, but for some reason I just can’t seem to solve it.

Please can someone advise me why its not working, and any tips on fixing it?

 


The old version is at codepen.

I have been working on it via git repository branch while trying to convert it,
and have pasted the current state into this pen for display purposes.

My current goal is to get the basic layout in grid.html to match that of the old version in index.html and working for a large viewport. Once that is done, I will fix the formatting for the poem boxes and japanese text, then use media queries to reformat it into a single column layout for smaller screens.

I have currently tried to achieve this via the following code, however the grid css doesn’t seem to be having any effect at all - I suspect it is something to do with content overflowing the grid areas maybe?

.grid-container {
  display: grid;
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:     auto auto auto auto auto auto;
  grid-template-areas:
  "header header    header  header  header    header"
  "......     ......    pic     pic     ......    ......"
  "......     intro     intro   intro   intro     ......"
  "sidebar1   sidebar1  main    main    sidebar2  sidebar2"
  "link-banner .....    ......  ......  ......    ......"
  "......     ......    footer  ......  ......    ......";
}

and then for mobile will use a media query to have a layout more like

grid-template-areas:
" header "
" pic "
" intro"
" sidebar1"
"main"
"sidebar2"
"link-banner"
"footer";

Perhaps, a two column layout for an intermediate viewport size, if that would work.

I’d be so grateful to anyone who can get me past this hurdle, as I desperately want to get back on top of my study - I really want to work as a developer in the future, and this has really hit my confidence.

Thanks

You have created a very beautiful webpage. Of course your suggestion will work but the feel of the bigger webpage will be ruined won’t it?
I would draw out what you want your mobile view to look like, consider it a new page. It will be extremely difficult to have the existing css fit into the mobile look so you could write new html for a mobile look. You can set the laptop html display to none and mobile html to flex or grid or what have you. Or just parts of it.

Forget your beautiful page for a moment and make something for a mobile view. Then consider how you can tie them together and if you can’t, don’t, let them exist side by side and use the display property to hide and show.

.

1 Like

Thanks for the suggestion, perhaps I’ve let the frustration blind me to a simple way out. I think the perfectionist part of me is desperate for an integrated solution, so didn’t think of combining two different approaches.

Nice page!

I believe that all your grid items for your grid template areas all have to be direct children of a single shared parent grid container. You may need to tweak your nesting some to get there.

You might try a mock-up with colored boxes to get the general layout and responsive behavior dialed in and then start copying real content into your boxes.

In some places you have a div nested in an aside or a section. Aside and section are block level just like a div so you could skip the div altogether, avoid some nesting and keep the semantic value of HTML elements.

1 Like

Maybe you can integrate them, But it can be useful to look away from that page and look at it from another point of view, like a mobile view. I know what being blinded is about, I could write books about it. The ideas will come now, trust me.

1 Like

Ahh… looks like you’re correct about only the immediate children of the parent container being grid items!

From the Mozilla grid doc on grid containers:

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this all direct children of that element will become grid items

This is very useful to know!