Css Grid Dense Layout

Hello Fccers,
In the following pen is a mobile first layout with 2 media queries at min-width 500px and 650px(commented out at the bottom), in the later I attempt to place the nav next to the header using the ‘grid-auto-flow: row dense’ style but that didnt work out.
pls help.

Ps: Not sure if I used the hyperlink feature correctly.

Made modifications to your code like this. You had some typos and wrong syntax.
It’s grid-template-areas and not grid-template, etc…

@media(min-width:650px){
  body{
    grid-template-areas:
      " h h h h n "
      " . t t t . "
      " . . . . . "
      " f f f f f ";
    }
}
1 Like
  1. At line 12 you have a stray semicolon.

  2. This is not valid syntax, you can’t use repeat() for the track listings

" f f f f f " min-content / repeat(5, 1fr);

Note: The repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

  1. You have a semicolon instead of a colon on the grid-auto-flow declaration (I also don’t believe it is actually doing anything with the nav).

grid-auto-flow; row dense;

MDN docs on grid-template

1 Like