Angular 5 and CSS Grid - Cannot find grid areas - warning

Question

I created a new Angular 5.2 project using the CLI (e.g. ng new MyApp)

Changing to the folder and running the app works fine. (e.g ng serve)

I made the following changes to the generated code (see below). There are only HTML and CSS code changes, very minor, what I posted is the entirety of the changes.

When I save the code it recompiles, and a warning is thrown:

ErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: D:\MyApp\src\app\app.component.css:51:7: Can not find grid areas: header, nav, content, sidebar, ad, footer

The error seems to be related to the media query section of the CSS. If I remove that section the error goes away.

I don't remember this happening in Angular 4.x? Any ideas what's going on?

app.component.html

<div class="wrapper">
  <header class="main-head">The header</header>
  <nav class="main-nav">
      <ul>
          <li><a href="">Nav 1</a></li>
          <li><a href="">Nav 2</a></li>
          <li><a href="">Nav 3</a></li>
      </ul>
  </nav>
  <article class="content">
      <h1>Main article area</h1>
      <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
  </article> 
  <aside class="side">Sidebar</aside>
  <div class="ad">Advertising</div>
  <footer class="main-footer">The footer</footer>
</div>

app.compnent.css

.main-head {
    grid-area: header;
  }
  .content {
    grid-area: content;
  }
  .main-nav {
    grid-area: nav;
  }
  .side {
    grid-area: sidebar;
  }
  .ad {
    grid-area: ad;
  }
  .main-footer {
    grid-area: footer;
  }

  .wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
      "header"
      "nav"
      "content"
      "sidebar"
      "ad"
      "footer";
  }

  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header header  header"
        "nav    content sidebar"
        "nav    content ad"
        "footer footer  footer"
     }
     nav ul {
       flex-direction: column;
     }
  }

https://github.com/VJAI/angular-bone – VJAI Oct 13 '18 at 14:52 — VJAI, Oct 13 '18 at 14:52

score 9 · Accepted Answer · answered Feb 02 '18 at 19:36

9

I am having a similar problem and the solution I have found so far isn't a great one since it duplicates code, but it may help you.

First I realize that the error is just a warning and the code complies without a problem however it is worrisome so I added the classes that I defined outside of the @media within the curly braces so with your code it would look something like this:

.main-head {
    grid-area: header;
  }
  .content {
    grid-area: content;
  }
  .main-nav {
    grid-area: nav;
  }
  .side {
    grid-area: sidebar;
  }
  .ad {
    grid-area: ad;
  }
  .main-footer {
    grid-area: footer;
  }

  .wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
      "header"
      "nav"
      "content"
      "sidebar"
      "ad"
      "footer";
  }

  @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header header  header"
        "nav    content sidebar"
        "nav    content ad"
        "footer footer  footer"
     }
     nav ul {
       flex-direction: column;
     }
      .main-head {
        grid-area: header;
      }
      .content {
        grid-area: content;
      }
      .main-nav {
        grid-area: nav;
      }
      .side {
        grid-area: sidebar;
      }
      .ad {
        grid-area: ad;
      }
      .main-footer {
        grid-area: footer;
      }
  }

Again I don't like this solution but it gets rid of the error.

answered Feb 02 '18 at 19:36

SGTMcClain

106
4

1

Thank you, this does work. I'm waiting to see if there are any more responses before I mark it as the best answer. I am assuming this is a bug with the autoprefixer? I never would have guessed to do this however, so thank you. Yeah, it's just a warning, but I'm a little anal about warnings because I don't want to cover up something that might be relevant. A clean compile makes me feel better. :) – Todd Davis Feb 02 '18 at 21:39
1

I hope that there is a better answer out there because this brought me to a complete stop. I had actually come here to hopefully find an answer but this is the only similar post, so I decided to try a few things to get a clean compile since I too am pretty serious when it comes to warnings. – SGTMcClain Feb 05 '18 at 04:19
1

@SGTMcClain looks like angular-cli throws a warning, but it still works without code dublication. i only added the dublications to eliminate the warnings. – TypedSource Feb 09 '18 at 03:24
@TypedSource yeah we noticed that we could run it with the warning but I like to run warning free so that I can get a better picture of things that need fixing. – SGTMcClain Feb 12 '18 at 19:49
any luck? i am encountering the same problem (css rules, grid-area, not being found.) same code works when served with http-server via static html/css in the same browser. what is ng doing to the css that breaks it? – t.j. May 20 '18 at 06:03
I also have this problem in a code that doesn't use Angular: https://www.udemy.com/course/modern-html-css-from-the-beginning/learn/lecture/13875758. It is possible that the error is shown because Autoprefixer is trying to add the support for grid-template-areas in Internet Explorer, and [this is quite difficult](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/). I don't need IE support, so I turned off Autoprefixer translation for grid-template-areas in media queries using this comment: `/* autoprefixer: off */` as described on the CSS-Tricks page. – iwis Jul 11 '20 at 23:14

score 3 · Answer 2 · answered Mar 10 '18 at 21:51

If you're using Sass, to not repeat yourself as much, create a partial (_grid-areas.scss) with a mixin:

@mixin grid-areas {
body {
    .leftbar { grid-area: leftbar; }
    .rightbar { grid-area: rightbar; }
    .main { grid-area: main;
        header { grid-area: header; }
        #content {grid-area: content; }
    }
}

}

Then import it as needed:

@import 'grid-areas';
@media screen and (max-width: 80em) {
  @include grid-areas;
}

Clears my errors in CLI 1.7.2

score 0 · Answer 3 · answered Mar 30 '21 at 19:16

This warning occurred while using named grid-areas in Sass.

According to the CSS Tricks article posted by iwis, the issue is due to a conflict with Autoprefixer and the IE browser's support for the grid property.

To resolve the warning from Sass I simply replaced the property grid-template-areas: with the propertygrid-template:.

Angular 5 and CSS Grid - Cannot find grid areas - warning

3 Answers3