我在使用CSS网格的Angular 15组件中。当网格只有一行时,网格底部与“服务部分”底部相同。当我有多个行时,网格会延伸到“services-section”的底部之外。另外,每增加一行,底部的扩展就会增加一点。
将overflow设置为auto会将滚动条添加到div中。将overflow设置为hidden,将截断最后一行。这两者都不是期望的。高度,最小高度100%,自动等也不行。
如何让网格容器正常工作?https://jsfiddle.net/eflat123/vq08u7gb/7/
<div class="grid" style="min-height: fit-content;">
<mat-card class="card">
<mat-card-content><p>My Service 1</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 2</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 3</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 4</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 5</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 6</p><p>1 hour</p></mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-content><p>My Service 7</p><p>1 hour</p></mat-card-content>
</mat-card>
</div>
</div>
<style>
.services-section {
border: 1px solid blue;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0 1.5em;
grid-row-gap: 7%;
grid-column-gap: 5%;
}
</style>
字符串
1条答案
按热度按时间rwqw0loc1#
“网格-行-间隙:7%;”是问题的原因,请将其更改为百分比以外的值,这将解决您的问题
第一个月
也可删除或更改
style="height: 100%"
个至
style="min-height: 100%"
个以允许网格在添加卡片时增长