Search code examples
htmlcsscss-grid

Why am I getting columns instead of rows in CSS Grid?

I have an html page with 1 row for nav and 1 row for body. I have specified the two rows using css-grid. I have named the different grid areas

.grid-container {
  display: grid;
  grid-template-rows: [nav-row-start]40px [nav-row-end] [body-row-start] auto [body-row-end];
}

.my-border {
  border: 1px solid black;
}

.my-nav-height {
  height: 40px;
}

div {
  height: 100vh;
}

#nav {
  grid-row: nav-row-start/nav-row-end;
}

#body {
  grid-row: body-row-start/body-row-end;
}
<div class="grid-container">
  <div id="nav" class="my-border my-nav-height">nav bar</div>
  <div id="body" class="my-border my-body-height">body</div>
</div>

I see this (2 columns instead of two rows)

enter image description here

But if I add 0px dimension for gutter then I see two rows

enter image description here

Is gutter dimension mandatory?

Solution

  • It's a simple syntax error.

    You can't place two author-defined identifiers consecutively. They need to be combined.

    This is wrong:

    grid-template-rows: [nav-row-start] 40px [nav-row-end] [body-row-start] auto [body-row-end]

    This is right:

    grid-template-rows: [nav-row-start] 40px [nav-row-end body-row-start] auto [body-row-end]


    .grid-container {
  display: grid;
  grid-template-rows: [nav-row-start] 40px [nav-row-end body-row-start] auto [body-row-end];
}

.my-border {
  border: 1px solid black;
}

.my-nav-height {}

div {
  height: 100vh;
}

#nav {
  grid-row: nav-row-start/nav-row-end;
}

#body {
  grid-row: body-row-start/body-row-end;
}
    <div class="grid-container">
  <div id="nav" class="my-border my-nav-height">nav bar</div>
  <div id="body" class="my-border my-body-height">body</div>
</div>

    (Using the grid-gap property, I couldn't reproduce the gutter problem you encountered.)