grid areas are not respected and everything starts at the top

Issue

I originally had a header and main element, but decided to change to a grid after rethinking how I wanted the layout of my content to look. Upon moving my content into a holy-grail grid container with 2 new sidebars, suddenly everything is stuck to the top of the page.

None of the direct children of .page-wrapper have display properties that would mess with the hierarchy as far as I'm aware, and removing the width: min(65ch, 100% - 4rem); from the main element doesn't make a difference to the problem.

This is my first attempt at raw-dog HTML/CSS and I'm avoiding using JS or anything else.

Here is a code pen of the full web page:

https://codepen.io/Perflexed/pen/PoVwqPa?editors=1100

Ask away if you need more info so I can update the question.

EDIT: I'm using custom HTML elements and have tried making them have a display of block so they function like div rather than span. This made no difference to the outcome at all.

Solution

It's because of a few errors in your media queries.

1. In your min-width media query, you shouldn't use repeat(3, 1fr 2fr 1fr). repeat() duplicates the following fragment, so that's like writing grid-template-columns: 1fr 2fr 1fr 1fr 2fr 1fr 1fr 2fr 1fr;.
2. In both of your media queries, you wrote the media query incorrectly. It should be @media only screen and (<condition>), not @media screen (<condition>).

@media only screen and (max-width: 899px) { /* for PHONE and PORTRAIT TABLET */
    page-wrapper {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: 
        'header'
        'side-nav'
        'main'
        'aside'
        'footer';
    }
}

@media only screen and (min-width: 900px) { /* anything BIGGER */
    page-wrapper {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
        'header header header'
        'side-nav main aside'
        'footer footer footer';
    }
}

That fixed the issue for me while testing here: https://codepen.io/SonicBoomNFA/pen/MWLYZZL?editors=1100

Answered By - Nkemdi Anyiam