Css - 照片的自动网格列表(角度6)

Question

我想创建一个动态处理 Angular 6*ngFor指令的网格列表。我的问题/问题是我在火力基地中有 105 个对象的数组。对象的结构是这样的：

{src: 'some url', alt: 'title'}

现在我有 2 种不同类型的照片，一张水平，一张垂直。我想创建自动填充部分来填充空白空间，我知道可以使用 css3 中的网格列表来完成。但是如何将其与以下连接：

<div class="row">
<div class="imageGallery1 " *ngFor="let image of galleryList">
<a  [href]="image.src" [title]="image.alt">
<img [src]="image.src" [alt]="image.alt" style="max-width: 300px; max-height: 300px; object-fit: contain; padding-right: 20px;" />
</a>
</div>

样式仅用于创建临时缩略图

有没有办法检查每张照片的类型？(垂直，水平(和后来自动分类它们？如果有其他方法可以做到这一点，请指出我

Answer 1

我在网格css的youtube课程中找到了解决方案。

https://www.youtube.com/watch?v=t6CBKf8K_Ac

.css：

.row {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto;
grid-auto-flow: dense;
}
.imageGallery1 {
text-align: center;
position: relative;
& img {
width: 100%;
max-height: 510px;
height: 251px;
}
}
.vertical {
grid-row: span 2;
& img {
height: 510px;
}
}

现在每张垂直照片都有自己的类grid-row: span 2;

也许我可以帮助某人