Использование CSS Grid глобально в Angular6 - PullRequest
Новая
       6

Использование CSS Grid глобально в Angular6

0 голосов
/ 19 октября 2018

Я пытаюсь использовать css grid глобально в файле angulars styles.css.Кажется, элементы внутри компонента приложения недоступны.Я использую grid-template-area и отображаю свою сетку в теле.

styles.css: 

       /* You can add global styles to this file, and also import other style files */
    body{
        margin:0;
        padding: 0%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:"header header header"
                            "main main main"
                            "footer footer footer";
    }
    header{
        margin: 0%;
        padding: 20px;
        grid-area: "header";
        border: 1px solid black;
        border-radius: 10%;
        background-color: #fa3117e3;
    
    }
    main{
        margin: 0%;
        padding: 20px;
        grid-area: "main";
        border: 1px solid black;
        border-radius: 10%;
        background-color: #e07924;
    }
    footer{
        margin: 0%;
        padding: 20px;
        grid-area: "footer";
        border: 1px solid black;
        border-radius: 10%;
        background-color: #6f1adf;
    }

app.component.html: 

<header>
  <title>
    <h1> THIS IS THE TITLE</h1>
  </title>
</header>

<main></main>
<footer></footer>

Index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Practice</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

предупреждение после подачи нг: enter image description here

...