html - 在 Angular 项目中应用 CSS 网格

Question

我设计了一个网页，最初使用带有网格布局的纯 HTML 和 CSS。但后来我决定使用 Angular 来实现它。

我已经将页面划分为基本组件（例如页眉、内容、页脚），现在我正在尝试转移布局。到目前为止，该页面并未按预期呈现。

例如，在原始 css 文件中，我尝试在 app.component.css 中移动，但未成功：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.item-header {
    grid-area: header;
}
.item-content {
    grid-area: content;
}
.item-footer {
    grid-area: footer;
}
.grid-container {
    display: grid;
    grid-template:
        "header header header" 70px
        "content content content" auto
        "footer footer footer" 20px;
    background-color: blue;
    color: white;
    position: relative;
    width: 100vw;
    height: 100vh;
}

所以，主要问题是：有没有办法应用包含所有组件的通用 CSS 网格布局？

标签： htmlcssangular