gpt4 book ai didi

html - CSS 网格自动流 : dense not working

转载 作者:行者123 更新时间:2023-11-28 02:29:32 28 4
gpt4 key购买 nike

<分区>

您可以这样想,因为我们在 Facebook 上上传了多张图片(可能尺寸不同),它们在新闻源中很好地显示了这些图片。

我有一个容器 .wrapper,它包含一个 CSS-grid 布局框,其类为 .card-img-grid。它最多可以有 4 张图片,但它们的宽度高度会有所不同,即,有些是方形的,有些是双向的(垂直或水平)。完全取决于用户的上传方式。

我的问题是由于图像网格大小的差异,造成了白色间隙,这破坏了我的完整用户体验。请帮助我,我该如何解决这个问题,或者还有另一种方法可以实现多张图片的 Facebook 类型布局?

我希望网格根据图像自行调整。另外,我不能使用
grid-column: span 2;grid-row: span 2; 像属性一样,因为我不知道图像有多大或多小。工作代码笔 demo

我的 Angular 模板

<div class="card-img-grid">
// Loop will be displaying only 4 images, but can have different size
<ng-container *ngFor="let img of feed.images | slice: 0 : 4">
<div class="img-grid-item">
<img class="w-100" [src]="img.url"> // .w-100 sets width: 100%
</div>
</ng-container>
</div>

CSS 代码

.wrapper {
max-width: 500px;
}

.card-img-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 4px;
grid-auto-flow: dense;
margin: 14px 0 5px;
}
.card-img-grid .img-grid-item {
overflow: hidden;
cursor: pointer;
}

My layout

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com