Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andrew Cauthorn
Andrew Cauthorn
6,610 Points
Posted by Andrew Cauthorn
Andrew Cauthorn
6,610 Points

Why is my CSS grid not displaying properly?

I don't see the nav or main elements in my design unless I go into the inspect elements and check the Overlay grid. Here's my grid.css code:

.container { height: 100vh; display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(150px, auto); grid-gap: 15px; grid-template-areas: "header" "nav" "main" "aside" "footer"; }

header { grid-area: header; }

nav { grid-area: nav; }

main { grid-area: main;
}

aside { grid-area: aside; }

footer { grid-area: footer; }

2 Answers

William Cottrell
William Cottrell
1,051 Points
William Cottrell
William Cottrell
1,051 Points

My guess is the 100vh!!

:-moz-only-whitespace : 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height:…Example HTML <div> </div> CSS :root { overflow: hidden; max-width: 100vw; max-height

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Note: In Selectors Level 4 the :empty selector was changed to act like :-moz-only-whitespace, but no browsers currently support this yet.

The :-moz-only-whitespace CSS pseudo-class matches elements that only contains text nodes that only contain whitespace. (This includes elements with empty text nodes and elements with no child nodes.)

Andrew Cauthorn
Andrew Cauthorn
6,610 Points
Andrew Cauthorn
Andrew Cauthorn
6,610 Points

Thank you, William! I appreciate the help!