如何在 CSS 中对齐 Angular 网格？

Question

如何在 Angular 组件中使用 css 在页面中心对齐网格

.grid-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);    
}

我尝试了 margin-left 和 margin-right 的百分比，但效果不是很优雅。

<main>
 <div class="grid-container col-md-9 text-center center">
 <card class="grid-item" [data]="topic"><card>
<ng-container *ngFor="let o of os">
    <card class="grid-item" [data]="o"></card>
</ng-container>
</div>
</main>

Answer 1

你可以在 css 中做到这一点：

main {
  display: flex;
  justify-content: center;
}